{"_id":"@47stats/47maps-dashboard","_rev":"2-6aba6fcea4845e2519ca5661258474bf","name":"@47stats/47maps-dashboard","dist-tags":{"latest":"0.9.1"},"versions":{"0.9.0":{"name":"@47stats/47maps-dashboard","version":"0.9.0","keywords":["react","dashboard","demographics","statistics","visualization","recharts","typescript","47stats"],"author":{"name":"team 47stats"},"license":"MIT","_id":"@47stats/47maps-dashboard@0.9.0","maintainers":[{"name":"47stats","email":"47stats@nihon-toukei.co.jp"}],"homepage":"https://github.com/47stats/47maps-dashboard#readme","bugs":{"url":"https://github.com/47stats/47maps-dashboard/issues"},"dist":{"shasum":"ac8953bec83153d37ba0a111e35bc781d69d511c","tarball":"https://registry.npmjs.org/@47stats/47maps-dashboard/-/47maps-dashboard-0.9.0.tgz","fileCount":41,"integrity":"sha512-GDnbsmW+cjDso1bgyiSF33/gpSd0gQubyrXSsFmdqgrOoxDaboq2x5/BmXk3XCD2T6SZJud9Q3U0OuCQNPOp6g==","signatures":[{"sig":"MEQCIBw6a4mJObMsPfUbPA0dKeBBgMG1tDpGT42I7Z4d8a9SAiBVBlQ1XUw8J1ijxHuoEA4yOWAwuc778upp4PRL7LuqAg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":168672},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"npm":">=11.0.0","node":">=20.17.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./style.css":"./dist/style.css"},"gitHead":"d7851bdeafaccd2fb0020ba663ee607ae14b56cd","scripts":{"dev":"vite --config vite.config.ts","lint":"eslint .","test":"vitest","build":"tsc && vite build --config vite.config.ts","format":"prettier . --write","verify":"npm run typecheck && npm run lint && npm run test:run","preview":"vite preview --config vite.config.ts","test:ui":"vitest --ui","lint:fix":"eslint . --fix","test:run":"vitest run","build:lib":"vite build --config vite.config.lib.ts","build:pkg":"npm run prepublishOnly && npm pack --ignore-scripts","typecheck":"tsc --noEmit","format:check":"prettier . --check","test:coverage":"vitest --coverage","prepublishOnly":"npm run verify && npm run build:lib"},"_npmUser":{"name":"47stats","email":"47stats@nihon-toukei.co.jp"},"overrides":{"lodash":"^4.18.1"},"repository":{"url":"git+https://github.com/47stats/47maps-dashboard.git","type":"git"},"_npmVersion":"11.16.0","description":"React dashboard components for 47stats demographic data visualization","directories":{},"_nodeVersion":"24.18.0","dependencies":{"recharts":"^2.15.1","react-icons":"^5.5.0","flowbite-react":"^0.9.0","react-fast-compare":"^3.2.2"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"packageManager":"npm@11.16.0","devDependencies":{"vite":"^6.4.3","jsdom":"^27.2.0","react":"^18.2.0","eslint":"^8.57.0","vitest":"^4.1.10","postcss":"^8.4.37","prettier":"3.2.0","react-dom":"^18.2.0","@vitest/ui":"^4.1.10","typescript":"^5.4.2","@types/node":"^22.14.0","tailwindcss":"^3.4.1","@47stats/api":"^0.9.0","@types/react":"^18.2.67","autoprefixer":"^10.4.18","vite-plugin-dts":"^4.5.4","@types/react-dom":"^18.2.22","@vitest/coverage-v8":"^4.1.10","@testing-library/dom":"^10.4.1","@vitejs/plugin-react":"^4.2.1","@testing-library/react":"^16.3.0","eslint-config-prettier":"^9.1.0","rollup-plugin-visualizer":"^5.14.0","@testing-library/jest-dom":"^6.9.1","@typescript-eslint/parser":"^7.3.1","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-tailwindcss":"^3.15.1","eslint-plugin-react-refresh":"^0.4.6","prettier-plugin-tailwindcss":"^0.5.12","@typescript-eslint/eslint-plugin":"^7.3.1"},"peerDependencies":{"react":">=18.0.0 <20.0.0","react-dom":">=18.0.0 <20.0.0","@47stats/api":"^0.9.0"},"_npmOperationalInternal":{"tmp":"tmp/47maps-dashboard_0.9.0_1785907360218_0.07613973597267365","host":"s3://npm-registry-packages-npm-production"}},"0.9.1":{"name":"@47stats/47maps-dashboard","version":"0.9.1","packageManager":"npm@11.16.0","description":"React dashboard components for 47stats demographic data visualization","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./style.css":"./dist/style.css"},"scripts":{"dev":"vite --config vite.config.ts","build":"tsc && vite build --config vite.config.ts","build:lib":"vite build --config vite.config.lib.ts","build:pkg":"npm run prepublishOnly && npm pack --ignore-scripts","preview":"vite preview --config vite.config.ts","test":"vitest","test:run":"vitest run","test:ui":"vitest --ui","test:coverage":"vitest --coverage","format":"prettier . --write","format:check":"prettier . --check","lint":"eslint .","lint:fix":"eslint . --fix","typecheck":"tsc --noEmit","verify":"npm run typecheck && npm run lint && npm run test:run","prepublishOnly":"npm run verify && npm run build:lib"},"keywords":["react","dashboard","demographics","statistics","visualization","recharts","typescript","47stats"],"author":{"name":"Nippon Statistics Center"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/47stats/47maps-dashboard.git"},"bugs":{"url":"https://github.com/47stats/47maps-dashboard/issues"},"homepage":"https://github.com/47stats/47maps-dashboard#readme","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"engines":{"node":">=20.17.0","npm":">=11.0.0"},"peerDependencies":{"@47stats/api":"^0.9.0","react":">=18.0.0 <20.0.0","react-dom":">=18.0.0 <20.0.0"},"dependencies":{"flowbite-react":"^0.9.0","react-fast-compare":"^3.2.2","react-icons":"^5.5.0","recharts":"^2.15.1"},"overrides":{"lodash":"^4.18.1"},"devDependencies":{"@47stats/api":"^0.9.0","@testing-library/dom":"^10.4.1","@testing-library/jest-dom":"^6.9.1","@testing-library/react":"^16.3.0","@types/node":"^22.14.0","@types/react":"^18.2.67","@types/react-dom":"^18.2.22","@typescript-eslint/eslint-plugin":"^7.3.1","@typescript-eslint/parser":"^7.3.1","@vitejs/plugin-react":"^4.2.1","@vitest/coverage-v8":"^4.1.10","@vitest/ui":"^4.1.10","autoprefixer":"^10.4.18","eslint":"^8.57.0","eslint-config-prettier":"^9.1.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.6","eslint-plugin-tailwindcss":"^3.15.1","jsdom":"^27.2.0","postcss":"^8.4.37","prettier":"3.2.0","prettier-plugin-tailwindcss":"^0.5.12","react":"^18.2.0","react-dom":"^18.2.0","rollup-plugin-visualizer":"^5.14.0","tailwindcss":"^3.4.1","typescript":"^5.4.2","vite":"^6.4.3","vite-plugin-dts":"^4.5.4","vitest":"^4.1.10"},"gitHead":"5717942639f05f62a1feccda27dc56f4d9d9fb23","_id":"@47stats/47maps-dashboard@0.9.1","_nodeVersion":"24.18.0","_npmVersion":"11.16.0","dist":{"integrity":"sha512-papdlV9pa2su8pD1b+ttgx+qGm7kRzBgbqSK3wqXtKMQh1SpQQ3DHoEQ8q1z3ZKptQZAXV64c76di22XsrejjQ==","shasum":"a002a5451342ff081ed21d58155d6b93f79bb397","tarball":"https://registry.npmjs.org/@47stats/47maps-dashboard/-/47maps-dashboard-0.9.1.tgz","fileCount":41,"unpackedSize":168822,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIF0m3W0lR/co45ZaJ23oTGGUplxV/WoJ7Fi/499SDgDVAiBfOF1A08wCGTviWGI2CcVvcVl1TUkP7JonpkRiAfhWXg=="}]},"_npmUser":{"name":"47stats","email":"47stats@nihon-toukei.co.jp"},"directories":{},"maintainers":[{"name":"47stats","email":"47stats@nihon-toukei.co.jp"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/47maps-dashboard_0.9.1_1786509390338_0.10839793294022382"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-05T05:22:40.038Z","modified":"2026-08-12T04:36:30.621Z","0.9.0":"2026-08-05T05:22:40.394Z","0.9.1":"2026-08-12T04:36:30.474Z"},"bugs":{"url":"https://github.com/47stats/47maps-dashboard/issues"},"author":{"name":"Nippon Statistics Center"},"license":"MIT","homepage":"https://github.com/47stats/47maps-dashboard#readme","keywords":["react","dashboard","demographics","statistics","visualization","recharts","typescript","47stats"],"repository":{"type":"git","url":"git+https://github.com/47stats/47maps-dashboard.git"},"description":"React dashboard components for 47stats demographic data visualization","maintainers":[{"name":"47stats","email":"47stats@nihon-toukei.co.jp"}],"readme":"# @47stats/47maps-dashboard\n\n47stats API を使った人口統計ダッシュボードを、React コンポーネントとして組み込めるライブラリです。\n\n都道府県と市区町村の人口データ、人口推移、世帯数推移、年齢構成、転入転出、出生死亡などを、ダッシュボードや個別ウィジェットとして利用できます。\n\n## 特徴\n\n- React 18 / 19 対応\n- TypeScript 対応\n- ESM / CJS 両対応\n- Recharts ベースのチャートコンポーネント\n- Flowbite React ベースの UI\n- ダークモード対応\n- コンポーネント単位で再利用可能\n- `ConfigProvider` で 47stats API 設定を一元化\n\n## 想定用途\n\n- 人口統計ダッシュボードの組み込み\n- 都道府県 / 市区町村の比較レポート表示\n- 47stats API を使った分析画面の素早い立ち上げ\n- 既存 React アプリへの統計ウィジェット追加\n\n## インストール\n\n```bash\nnpm install @47stats/47maps-dashboard @47stats/api\n```\n\n## Peer Dependencies\n\n- `react >= 18.0.0 < 20.0.0`\n- `react-dom >= 18.0.0 < 20.0.0`\n- `@47stats/api >= 0.9.0 < 1.0.0`\n\n## クイックスタート\n\n### 最小構成\n\n```tsx\nimport { ConfigProvider, DemographicReport } from \"@47stats/47maps-dashboard\";\nimport \"@47stats/47maps-dashboard/style.css\";\n\nexport default function App() {\n  return (\n    <ConfigProvider\n      userConfig={{\n        statsApiUrl: \"https://your-api.example.com\",\n        statsApiKey: \"your-api-key\",\n      }}\n    >\n      <DemographicReport />\n    </ConfigProvider>\n  );\n}\n```\n\n### 環境変数を使う場合\n\nこのライブラリ自身は環境変数を読み取りません。利用アプリ側で環境変数を読み取り、`userConfig` に渡してください。\n\nこのリポジトリのデモアプリでは、本番用の `.env.production` とローカル開発用の\n`.env.development.local` を使用します。`npm run dev` はdevelopment用、`npm run build` はproduction用の設定を読み込みます。\n\n```bash\ncp .env.example .env.production\ncp .env.example .env.development.local\n```\n\n```env\nVITE_STATS_API_URL=https://your-api.example.com\nVITE_STATS_API_KEY=your-api-key\n```\n\n```tsx\nimport { ConfigProvider, DemographicReport } from \"@47stats/47maps-dashboard\";\nimport \"@47stats/47maps-dashboard/style.css\";\n\nexport default function App() {\n  return (\n    <ConfigProvider\n      userConfig={{\n        statsApiUrl: import.meta.env.VITE_STATS_API_URL,\n        statsApiKey: import.meta.env.VITE_STATS_API_KEY,\n      }}\n    >\n      <DemographicReport />\n    </ConfigProvider>\n  );\n}\n```\n\n### セキュリティと既知の制約\n\n1. **API キーは公開用に限定されます。**\n   `userConfig` や `VITE_*` 環境変数に指定した値はブラウザへ配布され、利用者から参照できます。秘密鍵や管理者権限を持つキーは指定しないでください。API 側で許可リファラーを制限し、キーには必要最小限の権限とレート制限を設定してください。\n\n2. **API 設定は JavaScript 実行環境内で共有されます。**\n   `@47stats/api` の API URL と API キーはプロセス内の共有設定です。同一のブラウザページや SSR サーバープロセスでは、すべての `ConfigProvider` に同じ設定を指定してください。異なる設定を同時に指定するとエラーになります。テナントごとに異なる設定が必要な SSR 構成では、テナントごとに実行環境を分離してください。\n\n## 提供コンポーネント\n\n### ダッシュボード\n\n- `DemographicReport`\n  都道府県選択から市区町村の詳細チャートまで含んだメインダッシュボードです。\n\n- `TabPanel`\n  レポート表示用のタブ UI です。\n\n### ウィジェット\n\n- `PrefPopulation`\n- `CityPopulation`\n- `PopulationTransition`\n- `HouseholdTransition`\n- `PercentagePopulation`\n- `RatioPopulation`\n- `AgeGroupPopulation`\n- `InOutPopulation`\n- `BirthDeathPopulation`\n- `ScrollableContainer`\n\n### チャート\n\n- `DataBarChart`\n- `DataLineChart`\n- `DataAreaChart`\n- `DataPieChart`\n\n### レイアウト / フック / 設定\n\n- `GridLayout`\n- `ConfigProvider`\n- `useConfig`\n- `useChartTheme`\n\n## 利用例\n\n### 個別ウィジェットを組み込む\n\n```tsx\nimport {\n  ConfigProvider,\n  PrefPopulation,\n  CityPopulation,\n  GridLayout,\n} from \"@47stats/47maps-dashboard\";\nimport \"@47stats/47maps-dashboard/style.css\";\n\nexport default function DashboardPage() {\n  return (\n    <ConfigProvider\n      userConfig={{\n        statsApiUrl: \"https://your-api.example.com\",\n        statsApiKey: \"your-api-key\",\n      }}\n    >\n      <GridLayout className=\"grid-cols-1 lg:grid-cols-2\">\n        <PrefPopulation title=\"人口総数\" />\n        <CityPopulation area=\"13\" name=\"東京都\" title=\"人口総数・東京都\" />\n      </GridLayout>\n    </ConfigProvider>\n  );\n}\n```\n\n## スタイリング\n\nこのライブラリは Flowbite React と Tailwind CSS を前提にしたコンポーネントを含みます。\n\nTailwind を利用するアプリでは、必要に応じて `content` にライブラリの配下を追加してください。\n\n```js\nexport default {\n  content: [\n    \"./src/**/*.{js,ts,jsx,tsx}\",\n    \"./node_modules/flowbite-react/**/*.js\",\n    \"./node_modules/@47stats/47maps-dashboard/dist/**/*.js\",\n  ],\n  darkMode: \"class\",\n};\n```\n\n## 開発\n\n```bash\nnpm ci\nnpm run dev\nnpm run typecheck\nnpm run lint\nnpm test\nnpm run test:coverage\nnpm run build:lib\nnpm run build:pkg\n```\n\n### 主なスクリプト\n\n- `npm run dev`\n  開発サーバーを起動します。\n\n- `npm run build`\n  サンプルアプリをビルドします。\n\n- `npm run build:lib`\n  ライブラリをビルドします。\n\n- `npm run build:pkg`\n  npm 配布用パッケージを作成します。\n\n- `npm run typecheck`\n  TypeScript 型チェックを実行します。\n\n- `npm test`\n  ユニットテストを実行します。\n\n- `npm run test:coverage`\n  カバレッジ付きでテストを実行します。\n\n## 品質状況\n\n現状の確認結果は次のとおりです。\n\n- テストファイル: 11 passed\n- テストケース: 34 passed\n- 総合カバレッジ（Statements）: 53.36%\n- チャートコンポーネントのカバレッジ（Statements）: 80.72%\n\n詳細は [`TEST_REPORT.md`](https://github.com/47stats/47maps-dashboard/blob/main/TEST_REPORT.md) を参照してください。\n\n## 公開前チェック\n\nGitHub や npm に公開する前は、最低限次を実行してください。\n\n```bash\nnpm run verify\nnpm run build:lib\nnpm pack --dry-run\n```\n\n`verify` では型チェック、Lint、テストを実行します。`prepublishOnly` では `verify` と `build:lib` が実行されます。\n\n初回公開時を含め、このパッケージは `publishConfig` により npmjs.com のpublic packageとして公開されます。\n\n```bash\nnpm publish\n```\n\n## リポジトリ公開時にあるとよいもの\n\n- GitHub Topics\n  `react`, `dashboard`, `statistics`, `demographics`, `recharts`, `typescript`\n\n- リポジトリ説明文\n  `React dashboard components for 47stats demographic data visualization`\n\n- 公開後の追加候補\n  - スクリーンショット\n  - Storybook または docs サイト\n  - API リファレンス\n  - 使用例アプリへのリンク\n\n## ライセンス\n\nMIT\n\n## Links\n\n- Repository: https://github.com/47stats/47maps-dashboard\n- Issues: https://github.com/47stats/47maps-dashboard/issues\n- npm: https://www.npmjs.com/package/@47stats/47maps-dashboard\n","readmeFilename":"README.md"}