arbor-dashboard 1.0.0

package/.nvmrc

@@ -0,0 +1 @@
+v18.18.0

package/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "tabWidth": 4,
+  "trailingComma": "all",
+  "bracketSpacing": false
+}

package/.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true,
+    "[typescriptreact]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    }
+}

package/README.md

@@ -0,0 +1,2 @@
+# data.responsive_charting_dashboards
+An npm package of responsive charting components for data visualisation

package/eslint.config.mjs

@@ -0,0 +1,18 @@
+import globals from 'globals';
+import pluginJs from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import pluginReact from 'eslint-plugin-react';
+
+export default [
+    {files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}']},
+    {languageOptions: {globals: globals.browser}},
+    pluginJs.configs.recommended,
+    ...tseslint.configs.recommended,
+    pluginReact.configs.flat.recommended,
+    {
+        rules: {
+            'no-unused-vars': 'error',
+            'no-undef': 'error',
+        },
+    },
+];

package/index.ts

@@ -0,0 +1,2 @@
+export {BarChart} from './src/Components/Charts/BarChart';
+export {Dashboard} from './src/Components/Dashboard/Dashboard';

package/package.json

@@ -0,0 +1,42 @@
+{
+    "name": "arbor-dashboard",
+    "version": "1.0.0",
+    "description": "A tool to create responsive dashboards with charts",
+    "main": "index.ts",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+ssh://git@github.com:arbor-education/data.responsive_charting_dashboards.git"
+    },
+    "keywords": [
+        "Dashboard",
+        "Reporting",
+        "Arbor",
+        "Charts"
+    ],
+    "author": "Ashley Boyd",
+    "license": "ISC",
+    "bugs": {
+        "url": "https://github.com/arbor-education/data.responsive_charting_dashboards/issues"
+    },
+    "homepage": "https://github.com/arbor-education/data.responsive_charting_dashboards#readme",
+    "dependencies": {
+        "@nivo/bar": "^0.87.0",
+        "@nivo/heatmap": "^0.88.0",
+        "@nivo/line": "^0.87.0",
+        "@tanstack/react-query": "^5.60.5",
+        "react": "^18.3.1",
+        "react-grid-layout": "^1.5.0",
+        "typescript": "^5.6.3"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.13.0",
+        "eslint": "^9.13.0",
+        "eslint-plugin-react": "^7.37.1",
+        "globals": "^15.11.0",
+        "prettier": "^3.3.3",
+        "typescript-eslint": "^8.11.0"
+    }
+}

package/src/Components/Charts/BarChart.tsx

@@ -0,0 +1,133 @@
+import {ResponsiveBar} from '@nivo/bar';
+import React from 'react';
+import {transformChartData} from './transformChartData';
+import {useQuery} from '@tanstack/react-query';
+import {httpGet} from '../../HttpRequest/HttpRequest';
+type BarChartProps = {
+    dataUrl: string;
+    token: string;
+    testEnv: boolean;
+};
+export const BarChart = ({dataUrl, token, testEnv}: BarChartProps) => {
+    const {data} = useQuery({
+        queryKey: ['bar'],
+        queryFn: () => httpGet(dataUrl, token),
+    });
+
+    const {transformedData, query, annotation} = transformChartData(
+        data,
+        'bar',
+        testEnv,
+    );
+    const keys = query.measures;
+    const indexBy = query.dimensions[0];
+    const xAxisLabel = annotation.dimensions[indexBy].title;
+    const yAxisLabel = annotation.measures[keys[0]].title;
+
+    return (
+        <ResponsiveBar
+            data={transformedData}
+            keys={keys}
+            indexBy={indexBy}
+            margin={{top: 50, right: 130, bottom: 50, left: 60}}
+            padding={0.3}
+            valueScale={{type: 'linear'}}
+            indexScale={{type: 'band', round: true}}
+            colors={{scheme: 'nivo'}}
+            defs={[
+                {
+                    id: 'dots',
+                    type: 'patternDots',
+                    background: 'inherit',
+                    color: '#38bcb2',
+                    size: 4,
+                    padding: 1,
+                    stagger: true,
+                },
+                {
+                    id: 'lines',
+                    type: 'patternLines',
+                    background: 'inherit',
+                    color: '#eed312',
+                    rotation: -45,
+                    lineWidth: 6,
+                    spacing: 10,
+                },
+            ]}
+            fill={[
+                {
+                    match: {
+                        id: 'fries',
+                    },
+                    id: 'dots',
+                },
+                {
+                    match: {
+                        id: 'sandwich',
+                    },
+                    id: 'lines',
+                },
+            ]}
+            borderColor={{
+                from: 'color',
+                modifiers: [['darker', 1.6]],
+            }}
+            axisTop={null}
+            axisRight={null}
+            axisBottom={{
+                tickSize: 5,
+                tickPadding: 5,
+                tickRotation: 0,
+                legend: xAxisLabel,
+                legendPosition: 'middle',
+                legendOffset: 32,
+                truncateTickAt: 0,
+            }}
+            axisLeft={{
+                tickSize: 5,
+                tickPadding: 5,
+                tickRotation: 0,
+                legend: yAxisLabel,
+                legendPosition: 'middle',
+                legendOffset: -40,
+                truncateTickAt: 0,
+            }}
+            labelSkipWidth={12}
+            labelSkipHeight={12}
+            labelTextColor={{
+                from: 'color',
+                modifiers: [['darker', 1.6]],
+            }}
+            legends={[
+                {
+                    dataFrom: 'keys',
+                    anchor: 'bottom-right',
+                    direction: 'column',
+                    justify: false,
+                    translateX: 120,
+                    translateY: 0,
+                    itemsSpacing: 2,
+                    itemWidth: 100,
+                    itemHeight: 20,
+                    itemDirection: 'left-to-right',
+                    itemOpacity: 0.85,
+                    symbolSize: 20,
+                    effects: [
+                        {
+                            on: 'hover',
+                            style: {
+                                itemOpacity: 1,
+                            },
+                        },
+                    ],
+                },
+            ]}
+            role="application"
+            ariaLabel="Nivo bar chart demo"
+            barAriaLabel={(e) =>
+                e.id + ': ' + e.formattedValue + ' in country: ' + e.indexValue
+            }
+            onClick={(e) => console.log(e)}
+        />
+    );
+};

package/src/Components/Charts/HeatMap.tsx

@@ -0,0 +1,100 @@
+import {
+    DefaultHeatMapDatum,
+    HeatMapDatum,
+    HeatMapSerie,
+    ResponsiveHeatMap,
+} from '@nivo/heatmap';
+import React from 'react';
+import {transformChartData} from './transformChartData';
+import {useQuery} from '@tanstack/react-query';
+import {httpGet} from '../../HttpRequest/HttpRequest';
+
+type HeatMapProps = {
+    dataUrl: string;
+    token: string;
+    testEnv: boolean;
+};
+
+export const HeatMap = ({dataUrl, token, testEnv}: HeatMapProps) => {
+    const {data} = useQuery({
+        queryKey: ['heatMap'],
+        queryFn: () => httpGet(dataUrl, token),
+    });
+
+    const {transformedData, query, annotation} = transformChartData(
+        data,
+        'heatMap',
+        testEnv,
+    );
+
+    const keys = query.measures;
+    const indexBy = query.dimensions[0];
+    const xAxisLabel = annotation.dimensions[indexBy].title;
+    const yAxisLabel = annotation.measures[keys[0]].title;
+
+    return (
+        <ResponsiveHeatMap
+            data={
+                transformedData as HeatMapSerie<
+                    DefaultHeatMapDatum,
+                    HeatMapDatum
+                >[]
+            }
+            margin={{top: 100, right: 180, bottom: 50, left: 100}}
+            valueFormat=">-.2s"
+            axisTop={{
+                tickSize: 5,
+                tickPadding: 5,
+                tickRotation: -90,
+                legend: xAxisLabel,
+                legendOffset: 46,
+                truncateTickAt: 0,
+            }}
+            axisRight={{
+                tickSize: 5,
+                tickPadding: 5,
+                tickRotation: 0,
+                legend: yAxisLabel,
+                legendPosition: 'middle',
+                legendOffset: 70,
+                truncateTickAt: 0,
+            }}
+            axisLeft={{
+                tickSize: 5,
+                tickPadding: 5,
+                tickRotation: 0,
+                legend: yAxisLabel,
+                legendPosition: 'middle',
+                legendOffset: -72,
+                truncateTickAt: 0,
+            }}
+            colors={{
+                type: 'diverging',
+                scheme: 'red_yellow_blue',
+                divergeAt: 0.5,
+                minValue: -100000,
+                maxValue: 100000,
+            }}
+            emptyColor="#555555"
+            legends={[
+                {
+                    anchor: 'bottom',
+                    translateX: 0,
+                    translateY: 30,
+                    length: 400,
+                    thickness: 8,
+                    direction: 'row',
+                    tickPosition: 'after',
+                    tickSize: 3,
+                    tickSpacing: 4,
+                    tickOverlap: false,
+                    tickFormat: '>-.2s',
+                    title: 'Value →',
+                    titleAlign: 'start',
+                    titleOffset: 4,
+                },
+            ]}
+            onClick={(e) => console.log(e)}
+        />
+    );
+};

package/src/Components/Charts/LineChart.tsx

@@ -0,0 +1,98 @@
+import {ResponsiveLine} from '@nivo/line';
+import React from 'react';
+import {transformChartData} from './transformChartData';
+import {useQuery} from '@tanstack/react-query';
+import {httpGet} from '../../HttpRequest/HttpRequest';
+
+type LineChartProps = {
+    dataUrl: string;
+    token: string;
+    testEnv: boolean;
+};
+export const LineChart = ({dataUrl, token, testEnv}: LineChartProps) => {
+    const {data} = useQuery({
+        queryKey: ['line'],
+        queryFn: () => httpGet(dataUrl, token),
+    });
+
+    const {transformedData, query, annotation} = transformChartData(
+        data,
+        'line',
+        testEnv,
+    );
+    // TODO: this logic is replicated - should extract it
+    const keys = query.measures;
+    const indexBy = query.dimensions[0];
+    const xAxisLabel = annotation.dimensions[indexBy].title;
+    const yAxisLabel = annotation.measures[keys[0]].title;
+    return (
+        <ResponsiveLine
+            data={transformedData}
+            margin={{top: 100, right: 180, bottom: 100, left: 100}}
+            xScale={{type: 'point'}}
+            yScale={{
+                type: 'linear',
+                min: 'auto',
+                max: 'auto',
+                stacked: true,
+                reverse: false,
+            }}
+            yFormat=" >-.2f"
+            axisTop={null}
+            axisRight={null}
+            axisBottom={{
+                tickSize: 5,
+                tickPadding: 5,
+                tickRotation: 0,
+                legend: xAxisLabel,
+                legendOffset: 36,
+                legendPosition: 'middle',
+                truncateTickAt: 0,
+            }}
+            axisLeft={{
+                tickSize: 5,
+                tickPadding: 5,
+                tickRotation: 0,
+                legend: yAxisLabel,
+                legendOffset: -60,
+                legendPosition: 'middle',
+                truncateTickAt: 0,
+            }}
+            pointSize={10}
+            pointColor={{theme: 'background'}}
+            pointBorderWidth={2}
+            pointBorderColor={{from: 'serieColor'}}
+            pointLabel="data.yFormatted"
+            pointLabelYOffset={-12}
+            enableTouchCrosshair={true}
+            useMesh={true}
+            legends={[
+                {
+                    anchor: 'bottom-right',
+                    direction: 'column',
+                    justify: false,
+                    translateX: 100,
+                    translateY: 0,
+                    itemsSpacing: 0,
+                    itemDirection: 'left-to-right',
+                    itemWidth: 80,
+                    itemHeight: 20,
+                    itemOpacity: 0.75,
+                    symbolSize: 12,
+                    symbolShape: 'circle',
+                    symbolBorderColor: 'rgba(0, 0, 0, .5)',
+                    effects: [
+                        {
+                            on: 'hover',
+                            style: {
+                                itemBackground: 'rgba(0, 0, 0, .03)',
+                                itemOpacity: 1,
+                            },
+                        },
+                    ],
+                },
+            ]}
+            onClick={(e) => console.log(e)}
+        />
+    );
+};