{"id":27172106,"url":"https://github.com/pacificcommunity/sdmx-dashboard-components","last_synced_at":"2026-04-02T20:38:48.760Z","repository":{"id":210489433,"uuid":"726688299","full_name":"PacificCommunity/sdmx-dashboard-components","owner":"PacificCommunity","description":"Component library to create visuals for statistical data from SDMX API. See https://github.com/PacificCommunity/sdmx-dashboard-demo for a demo app and more information.","archived":false,"fork":false,"pushed_at":"2026-04-01T00:10:20.000Z","size":4004,"stargazers_count":1,"open_issues_count":3,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-04-01T01:53:50.145Z","etag":null,"topics":["components","datavisualisation","dataviz","react","sdmx"],"latest_commit_sha":null,"homepage":"https://pacificcommunity.github.io/sdmx-dashboard-components/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PacificCommunity.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-12-03T04:36:10.000Z","updated_at":"2026-04-01T00:08:07.000Z","dependencies_parsed_at":"2023-12-10T01:25:34.992Z","dependency_job_id":"8c441d0c-233d-4839-9075-d595f0fb6af0","html_url":"https://github.com/PacificCommunity/sdmx-dashboard-components","commit_stats":null,"previous_names":["stanozr/sdmx-dashboard-react"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/PacificCommunity/sdmx-dashboard-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PacificCommunity%2Fsdmx-dashboard-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PacificCommunity%2Fsdmx-dashboard-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PacificCommunity%2Fsdmx-dashboard-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PacificCommunity%2Fsdmx-dashboard-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PacificCommunity","download_url":"https://codeload.github.com/PacificCommunity/sdmx-dashboard-components/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PacificCommunity%2Fsdmx-dashboard-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31316002,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-02T12:59:32.332Z","status":"ssl_error","status_checked_at":"2026-04-02T12:54:48.875Z","response_time":89,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","datavisualisation","dataviz","react","sdmx"],"created_at":"2025-04-09T09:35:16.459Z","updated_at":"2026-04-02T20:38:48.754Z","avatar_url":"https://github.com/PacificCommunity.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SDMX Dashboard React Component\n\nEmbeddable React components to create a dashboard for SDMX data.\nThe components are built using [Vite](https://vitejs.dev/).\n\nThis repository also embeds a demo application to showcase the components (more info [here](#development)).\n\n\u003csub\u003eProject generated thanks to this great article: [Create a Component Library Fast🚀\\(using Vite's library mode\\)](https://dev.to/receter/how-to-create-a-react-component-library-using-vites-library-mode-4lma)\u003c/sub\u003e\n\n## Usage\n\nThis library provides a set of components to build visuals for SDMX data.\nSingle React components are available `SDMXChart`, `SDMXMap` and `SDMXValue` to embed SDMX visuals in your application and can also be combined in a\n `SDMXDashboard` component that generates a dashboard.\nThe single components are only configured via props, while the dashboard component can configured via a JSON configuration file.\n\nMore information on the syntax of the configuration can be found [here](https://github.com/PacificCommunity/sdmx-dashboard-demo/blob/main/public/doc.md)\n\n```bash\nnpm install sdmx-dashboard-components\n```\n\n```javascript\nimport { SDMXDashboard } from 'sdmx-dashboard-components';\n\nconst App = () =\u003e {\n  return (\n    // SDMX dashboard component build from JSON configuration file\n    \u003cSDMXDashboard\n      url='path/to/dashboard.json'\n    /\u003e\n    // SDMX chart component built from props\n    \u003cSDMXChart\n      config={{\n        data: [\"https://stats-sdmx-disseminate.pacificdata.org/rest/data/SPC,DF_WBWGI,1.0/A..VA_EST?startPeriod=2010\u0026dimensionAtObservation=AllDimensions\"],\n        title: {\n          text: \"World Bank Worldwide Governance Indicator\",\n        },\n        subtitle: {\n          text: \"Voice and Accountability\"\n        },\n        id:\"wgi_va\",\n        type: \"drilldown\",\n        xAxisConcept: \"GEO_PICT\",\n        drilldown: {\n          xAxisConcept:\"TIME_PERIOD\",\n        },\n        legend: {\n          concept: \"INDICATOR\"\n        },\n        yAxisConcept: \"OBS_VALUE\"\n      }}\n      language='en'\n    /\u003e\n  );\n};\n```\n\n### Highcharts Styled Mode\n\nThe user can also make use of all the Highcharts options passing them as props to the components with the `extraOptions` parameter of the config object.\n\nFor instance, the Highcharts `styledMode` option can be used to apply CSS styles to the chart's elements and also leverage the dark theme. In this case, the `colorPalette` parameter passed to the component must be an object that specify a colorIndex and not a color code. The integrating application has to include in its CSS the highcharts classes for the indexes. \n\n```javascript\n\u003cSDMXChart\n  config={{\n    data: [\"https://stats-sdmx-disseminate.pacificdata.org/rest/data/SPC,DF_WBWGI,1.0/A..VA_EST?startPeriod=2010\u0026dimensionAtObservation=AllDimensions\"],\n    title: {\n      text: \"World Bank Worldwide Governance Indicator\",\n    },\n    colorPalette: {\n      \"GEO_PICT\": {\n        \"CK\": 0,\n        \"FJ\": 1,\n        \"FM\": 2,\n        \"KI\": 3,\n        \"MH\": 4,\n        \"NC\": 5,\n        \"PF\": 8,\n        \"PW\": 10,\n        \"SB\": 11,\n        \"TO\": 12,\n        \"VU\": 14,\n        \"WF\": 15\n      }\n    },\n    extraOptions: {\n      chart: {\n        styledMode: true\n      }\n    }\n  }}\n/\u003e\n```\n\n```css\n.highcharts-color-0 {\n  fill: #E16A86;\n  stroke: #E16A86;\n}\n.highcharts-color-1 {\n  fill: #D7765B;\n  stroke: #D7765B;\n}\n.highcharts-color-2 {\n  fill: #C7821C;\n  stroke: #C7821C;\n}\n...\n```\n\n### Sorting data by value\n\nFor `column`-like representation (`column`, `bar`, `drilldown`, `lollipop`), the data is sorted alphabetically by default. The data can be sorted by value with the `sortByValue` config parameter in ascending or descending order. The sorting is done on the x-axis dimension.\n\n```javascript\n\u003cSDMXChart\n  config={{\n    ...\n    sortByValue: \"asc\" | \"desc\"\n    ...\n  }}\n/\u003e\n```\n\n## Development\n\n```bash\nnpm install\nnpm run dev\n```\n\nThe components are located in the `lib` folder where as the `src` folder hosts a demo application.\n\nThe vite preview mode can also be used to test the built library in the demo application.\n\n```bash\nnpm run preview\n```\n\nTo deploy the demo app under a subfolder only in production, set `VITE_DEMO_BASE_PATH`.\n\n```bash\n# Example: deploy demo to /sdmx-dashboard-components/\nVITE_DEMO_BASE_PATH=sdmx-dashboard-components npm run build-preview\n```\n\nWhen `VITE_DEMO_BASE_PATH` is empty (default), the demo is built for root (`/`).\n\n\n## Build\n\n```bash\nnpm run build\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpacificcommunity%2Fsdmx-dashboard-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpacificcommunity%2Fsdmx-dashboard-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpacificcommunity%2Fsdmx-dashboard-components/lists"}