SDMX Dashboard React Component

Embeddable React components to create a dashboard for SDMX data. The components are built using Vite.

This repository also embeds a demo application to showcase the components (more info here).

_{Project generated thanks to this great article: Create a Component Library Fast🚀(using Vite's library mode)}

Usage

This library provides a set of components to build visuals for SDMX data. Single React components are available SDMXChart, SDMXMap and SDMXValue to embed SDMX visuals in your application and can also be combined in a SDMXDashboard component that generates a dashboard. The single components are only configured via props, while the dashboard component can configured via a JSON configuration file.

More information on the syntax of the configuration can be found here

npm install sdmx-dashboard-components

import { SDMXDashboard } from 'sdmx-dashboard-components';

const App = () => {
  return (
    // SDMX dashboard component build from JSON configuration file
    <SDMXDashboard
      url='path/to/dashboard.json'
    />
    // SDMX chart component built from props
    <SDMXChart
      config={{
        data: ["https://stats-sdmx-disseminate.pacificdata.org/rest/data/SPC,DF_WBWGI,1.0/A..VA_EST?startPeriod=2010&dimensionAtObservation=AllDimensions"],
        title: {
          text: "World Bank Worldwide Governance Indicator",
        },
        subtitle: {
          text: "Voice and Accountability"
        },
        id:"wgi_va",
        type: "drilldown",
        xAxisConcept:"TIME_PERIOD",
        legend: {
          concept: "GEO_PICT"
        },
        yAxisConcept: "OBS_VALUE"
      }}
    />
  );
};

Development

npm install
npm run dev

The components are located in the lib folder where as the src folder hosts a demo application.

The vite preview mode can also be used to test the built library in the demo application.

npm run preview

Build

npm run build