arbor-dashboard 1.0.1 → 1.1.0

package/README.md

@@ -1,2 +1,15 @@
-# data.responsive_charting_dashboards
-An npm package of responsive charting components for data visualisation
+# 🚀 Welcome to your new awesome project!
+
+This project has been created using **webpack-cli**, you can now run
+
+```
+npm run build
+```
+
+or
+
+```
+yarn build
+```
+
+to bundle your application

package/package.json

@@ -1,10 +1,15 @@
 {
     "name": "arbor-dashboard",
-    "version": "1.0.1",
+    "version": "1.1.0",
     "description": "A tool to create responsive dashboards with charts",
-    "main": "index.ts",
+    "main": "src/index.ts",
+    "types": "src/index.d.ts",
     "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1"
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "build": "webpack --mode=production --node-env=production",
+        "build:dev": "webpack --mode=development",
+        "build:prod": "webpack --mode=production --node-env=production",
+        "watch": "webpack --watch"
     },
     "repository": {
         "type": "git",
@@ -33,10 +38,22 @@
     },
     "devDependencies": {
         "@eslint/js": "^9.13.0",
+        "@types/react": "^18.3.12",
+        "@types/react-grid-layout": "^1.3.5",
+        "@webpack-cli/generators": "^3.0.7",
+        "css-loader": "^7.1.2",
         "eslint": "^9.13.0",
         "eslint-plugin-react": "^7.37.1",
         "globals": "^15.11.0",
+        "html-webpack-plugin": "^5.6.3",
+        "mini-css-extract-plugin": "^2.9.2",
         "prettier": "^3.3.3",
-        "typescript-eslint": "^8.11.0"
+        "sass": "^1.81.0",
+        "sass-loader": "^16.0.3",
+        "style-loader": "^4.0.0",
+        "ts-loader": "^9.5.1",
+        "typescript-eslint": "^8.11.0",
+        "webpack": "^5.96.1",
+        "webpack-cli": "^5.1.4"
     }
 }

package/src/Components/Charts/BarChart.tsx

@@ -1,20 +1,17 @@
-import {ResponsiveBar} from '@nivo/bar';
+import {BarDatum, 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;
-    authToken: string;
-    testEnv: boolean;
-};
+import {BarChartProps} from '../../index.d';
+
 export const BarChart = ({dataUrl, authToken, testEnv}: BarChartProps) => {
     const {data} = useQuery({
         queryKey: ['bar'],
         queryFn: () => httpGet(dataUrl, authToken),
     });
 
-    const {transformedData, query, annotation} = transformChartData(
+    const {transformedData, query, annotation} = transformChartData<BarDatum>(
         data,
         'bar',
         testEnv,

package/src/Components/Charts/HeatMap.tsx

@@ -8,12 +8,7 @@ import React from 'react';
 import {transformChartData} from './transformChartData';
 import {useQuery} from '@tanstack/react-query';
 import {httpGet} from '../../HttpRequest/HttpRequest';
-
-type HeatMapProps = {
-    dataUrl: string;
-    authToken: string;
-    testEnv: boolean;
-};
+import {HeatMapProps} from '../../index.d';
 
 export const HeatMap = ({dataUrl, authToken, testEnv}: HeatMapProps) => {
     const {data} = useQuery({

package/src/Components/Charts/LineChart.tsx

@@ -3,12 +3,8 @@ import React from 'react';
 import {transformChartData} from './transformChartData';
 import {useQuery} from '@tanstack/react-query';
 import {httpGet} from '../../HttpRequest/HttpRequest';
+import {LineChartProps} from '../../index.d';
 
-type LineChartProps = {
-    dataUrl: string;
-    authToken: string;
-    testEnv: boolean;
-};
 export const LineChart = ({dataUrl, authToken, testEnv}: LineChartProps) => {
     const {data} = useQuery({
         queryKey: ['line'],

package/src/Components/Charts/transformChartData.ts

@@ -1,89 +1,10 @@
 import {BarDatum} from '@nivo/bar';
 import {HeatMapDatum, HeatMapSerie} from '@nivo/heatmap';
-
-type Query = {
-    limit: number;
-    measures: string[];
-    dimensions: string[];
-    filters: {
-        member: string;
-        operator: string;
-        values: string[];
-    }[];
-    timeDimensions: {
-        dimension: string;
-        granularity: string;
-    }[];
-    timezone: string;
-    rowLimit: number;
-};
-
-type Data = {
-    [key: string]: string | number;
-};
-
-type ApiResponse<T> = {
-    query: Query;
-    data: T[];
-    lastRefreshTime: string;
-    annotation: {
-        measures: {
-            [key: string]: {
-                title: string;
-                shortTitle: string;
-                description: string;
-                type: string;
-                meta: {
-                    user_roles: string[];
-                };
-                drillMembers: string[];
-                drillMembersGrouped: {
-                    measures: string[];
-                    dimensions: string[];
-                };
-            };
-        };
-        dimensions: {
-            [key: string]: {
-                title: string;
-                shortTitle: string;
-                type: string;
-            };
-        };
-        segments: {};
-        timeDimensions: {
-            [key: string]: {
-                title: string;
-                shortTitle: string;
-                description: string;
-                type: string;
-                meta: {
-                    user_roles: string[];
-                };
-            };
-        };
-    };
-    dataSource: string;
-    dbType: string;
-    extDbType: string;
-    external: boolean;
-    slowQuery: boolean;
-    total: number | null;
-};
-
-type ChartType = 'bar' | 'line' | 'heatMap';
-
-type LineData = {
-    id: string | number;
-    data: Array<{
-        x: number | string | Date;
-        y: number | string | Date;
-    }>;
-};
+import {ApiResponse, Data, LineData} from '../../index.d';
 
 export const transformChartData = <T extends Data>(
     data: ApiResponse<T>,
-    chartType: ChartType,
+    chartType: 'bar' | 'line' | 'heatMap',
     testEnv: boolean,
 ) => {
     // dimensions are stored in an array in query.dimensions - loop through this for measure strings

package/src/Components/Dashboard/Dashboard.tsx

@@ -6,14 +6,10 @@ import {MoveIcon} from '../../Icons';
 import {LineChart} from '../Charts/LineChart';
 import {HeatMap} from '../Charts/HeatMap';
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
+import {DashboardProps} from '../../index.d';
 
 const ResponsiveGridLayout = WidthProvider(Responsive);
 
-type DashboardProps = {
-    layoutConfig: string;
-    authToken: string;
-};
-
 const queryClient = new QueryClient();
 
 export const Dashboard = ({layoutConfig, authToken}: DashboardProps) => {

package/src/index.d.ts

@@ -0,0 +1,96 @@
+export interface BarChartProps {
+    dataUrl: string;
+    authToken: string;
+    testEnv: boolean;
+}
+export interface LineChartProps {
+    dataUrl: string;
+    authToken: string;
+    testEnv: boolean;
+}
+export interface HeatMapProps {
+    dataUrl: string;
+    authToken: string;
+    testEnv: boolean;
+}
+export interface DashboardProps {
+    layoutConfig: string;
+    authToken: string;
+}
+type Query = {
+    limit: number;
+    measures: string[];
+    dimensions: string[];
+    filters: {
+        member: string;
+        operator: string;
+        values: string[];
+    }[];
+    timeDimensions: {
+        dimension: string;
+        granularity: string;
+    }[];
+    timezone: string;
+    rowLimit: number;
+};
+
+export interface Data {
+    [key: string]: string | number;
+}
+
+export interface ApiResponse<T> {
+    query: Query;
+    data: T[];
+    lastRefreshTime: string;
+    annotation: {
+        measures: {
+            [key: string]: {
+                title: string;
+                shortTitle: string;
+                description: string;
+                type: string;
+                meta: {
+                    user_roles: string[];
+                };
+                drillMembers: string[];
+                drillMembersGrouped: {
+                    measures: string[];
+                    dimensions: string[];
+                };
+            };
+        };
+        dimensions: {
+            [key: string]: {
+                title: string;
+                shortTitle: string;
+                type: string;
+            };
+        };
+        segments: {};
+        timeDimensions: {
+            [key: string]: {
+                title: string;
+                shortTitle: string;
+                description: string;
+                type: string;
+                meta: {
+                    user_roles: string[];
+                };
+            };
+        };
+    };
+    dataSource: string;
+    dbType: string;
+    extDbType: string;
+    external: boolean;
+    slowQuery: boolean;
+    total: number | null;
+}
+
+export interface LineData {
+    id: string | number;
+    data: Array<{
+        x: number | string | Date;
+        y: number | string | Date;
+    }>;
+}

package/src/index.ts

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

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+        "allowSyntheticDefaultImports": true,
+        "noImplicitAny": true,
+        "module": "NodeNext",
+        "target": "es5",
+        "allowJs": true,
+        "jsx": "react",
+        "moduleResolution": "nodenext"
+    },
+    "files": ["src/index.ts"]
+}

package/webpack.config.js

@@ -0,0 +1,60 @@
+// Generated using webpack-cli https://github.com/webpack/webpack-cli
+
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const isProduction = process.env.NODE_ENV == 'production';
+
+const stylesHandler = MiniCssExtractPlugin.loader;
+
+const config = {
+    target: 'web',
+    entry: './src/index.ts',
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: 'arbor-dashboard.js',
+        library: 'arbor-dashboard',
+        libraryTarget: 'umd',
+        globalObject: 'this',
+        umdNamedDefine: true,
+    },
+    plugins: [
+        new MiniCssExtractPlugin(),
+
+        // Add your plugins here
+        // Learn more about plugins from https://webpack.js.org/configuration/plugins/
+    ],
+    module: {
+        rules: [
+            {
+                test: /\.(ts|tsx)$/i,
+                loader: 'ts-loader',
+                exclude: ['/node_modules/'],
+            },
+            {
+                test: /\.s[ac]ss$/i,
+                use: [stylesHandler, 'css-loader', 'sass-loader'],
+            },
+            {
+                test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
+                type: 'asset',
+            },
+
+            // Add your rules for custom modules here
+            // Learn more about loaders from https://webpack.js.org/loaders/
+        ],
+    },
+    resolve: {
+        extensions: ['.tsx', '.ts', '.jsx', '.js', '...'],
+    },
+};
+
+module.exports = () => {
+    if (isProduction) {
+        config.mode = 'production';
+    } else {
+        config.mode = 'development';
+    }
+    return config;
+};

package/index.ts

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