arbor-dashboard 1.0.2 → 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,11 +1,15 @@
 {
     "name": "arbor-dashboard",
-    "version": "1.0.2",
+    "version": "1.1.0",
     "description": "A tool to create responsive dashboards with charts",
-    "main": "index.ts",
-    "types": "index.d.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",
@@ -34,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

@@ -3,7 +3,7 @@ import React from 'react';
 import {transformChartData} from './transformChartData';
 import {useQuery} from '@tanstack/react-query';
 import {httpGet} from '../../HttpRequest/HttpRequest';
-import {BarChartProps} from 'responsiveChartingDashboardsTypes';
+import {BarChartProps} from '../../index.d';
 
 export const BarChart = ({dataUrl, authToken, testEnv}: BarChartProps) => {
     const {data} = useQuery({

package/src/Components/Charts/HeatMap.tsx

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

package/src/Components/Charts/LineChart.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import {transformChartData} from './transformChartData';
 import {useQuery} from '@tanstack/react-query';
 import {httpGet} from '../../HttpRequest/HttpRequest';
-import {LineChartProps} from 'responsiveChartingDashboardsTypes';
+import {LineChartProps} from '../../index.d';
 
 export const LineChart = ({dataUrl, authToken, testEnv}: LineChartProps) => {
     const {data} = useQuery({

package/src/Components/Charts/transformChartData.ts

@@ -1,6 +1,6 @@
 import {BarDatum} from '@nivo/bar';
 import {HeatMapDatum, HeatMapSerie} from '@nivo/heatmap';
-import {ApiResponse, Data, LineData} from 'responsiveChartingDashboardsTypes';
+import {ApiResponse, Data, LineData} from '../../index.d';
 
 export const transformChartData = <T extends Data>(
     data: ApiResponse<T>,

package/src/Components/Dashboard/Dashboard.tsx

@@ -6,7 +6,7 @@ import {MoveIcon} from '../../Icons';
 import {LineChart} from '../Charts/LineChart';
 import {HeatMap} from '../Charts/HeatMap';
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
-import {DashboardProps} from 'responsiveChartingDashboardsTypes';
+import {DashboardProps} from '../../index.d';
 
 const ResponsiveGridLayout = WidthProvider(Responsive);
 

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.d.ts

@@ -1,98 +0,0 @@
-declare module 'responsiveChartingDashboardsTypes' {
-    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/index.ts

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