pace-chart-lib 0.0.12 → 1.0.1

package/dist/components/Charts/ChartsWithAxis/MiscellaneousChartFamily/WaterfallChart.js

@@ -7,8 +7,9 @@ import { staticLegendShape } from "../../Core/Common.types";
 import { drawLegends, generalizedChartData, hideTooltipOnMouseOut, showTooltipOnMouseMove } from "../../Core/CommonFunctions";
 import { addDataTable, customYscaleLabelFormatting, dataTablePreCalculation, firstFunctionBeforeRender, getNumberWithFormat, getStackedData, initChartArea, initPlotArea, initSvg, initXaxis, initYaxis, marginCalculation, prepareDataForSeriesLabel, responsiveXaxisLabel, responsiveYaxisLabel, setChartTitle, setDateFormats, setXaxistitle, yAxistitle, yAxistitleRight } from "../ChartsWithAxisFunctions";
 import { actualChartTypes, } from "../ChartsWithAxisTypes.types";
-const WaterfallChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOptions, }) => {
+const WaterfallChart = ({ isDateType, formatOptions, data, }) => {
     // adding variables as per requirement
+    const chartId = crypto.randomUUID?.();
     let columnWidth = 0; // coz line chartO
     let colorScale;
     const chartType = actualChartTypes.waterfall;
@@ -103,7 +104,7 @@ const WaterfallChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOption
             secondaryYLabel,
         } = marginCalculation(
         // for all margin related calculations
-        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, xAxisObj[0]));
+        width, height, maxNumberForPrimaryAxis, maxNumberForSecondaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList, chartJSON.yMaxRight, isSecondaryAxisDrawn, isNormalizedChart, isDateType));
         setSVGContainer(margin); // for innerWidth/height static width/height
         ({ dataTable, dataTableHeight } = dataTablePreCalculation(
         // calculations for data tables
@@ -140,7 +141,7 @@ const WaterfallChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOption
     };
     const preProcessChartData = () => {
         const allChartData = [];
-        let formatedDimesionList = [];
+        let formatedDimensionList = [];
         seriesData.forEach((series) => {
             series.data.forEach((point) => {
                 allChartData.push(point);
@@ -187,38 +188,34 @@ const WaterfallChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOption
             chartJSON.dimensionList = chartJSON.legendList;
         }
         // Apply formatted dimensions
-        let xAxisObject = xAxisObj[0];
-        formatedDimesionList =
-            (xAxisObject.groupBy == "NA" || xAxisObject.groupBy == undefined) &&
-                xAxisObject.dataType === "DATE"
-                ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
-                : chartJSON.dimensionList;
-        getFormattedDimensionList(tempWaterfallChartData, xAxisObject);
+        formatedDimensionList = isDateType
+            ? setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d)
+            : chartJSON.dimensionList;
+        getFormattedDimensionList(tempWaterfallChartData);
     };
-    const getFormattedDimensionList = (tempWaterfallChartData, xAxisObject) => {
+    const getFormattedDimensionList = (tempWaterfallChartData) => {
         try {
             let tempDimensionList = [];
             let tempDimensionListWithIndex = [];
-            let tempFormatedDimesionList = [];
+            let tempformatedDimensionList = [];
             tempWaterfallChartData && tempWaterfallChartData.forEach((d, i) => {
                 if (d.dimension) {
                     tempDimensionList.push(d.dimension);
                     tempDimensionListWithIndex.push({ dimension: d.dimension, chartDataIndex: i, selfIndex: tempDimensionListWithIndex.length });
                 }
             });
-            if ((xAxisObject.groupBy == "NA" || xAxisObject.groupBy == undefined) &&
-                xAxisObject.dataType === "DATE") {
-                tempFormatedDimesionList = setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d);
+            if (isDateType) {
+                tempformatedDimensionList = setDateFormats(formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList).map((d) => d);
             }
             else {
-                tempFormatedDimesionList = tempDimensionList;
+                tempformatedDimensionList = tempDimensionList;
             }
-            let formatedDimesionList = JSON.parse(JSON.stringify(chartJSON.legendList));
+            let formatedDimensionList = JSON.parse(JSON.stringify(chartJSON.legendList));
             tempDimensionListWithIndex.forEach((listItem, i) => {
-                formatedDimesionList[listItem.chartDataIndex] = tempFormatedDimesionList[listItem.selfIndex];
+                formatedDimensionList[listItem.chartDataIndex] = tempformatedDimensionList[listItem.selfIndex];
             });
             chartJSON.legendList.forEach((d, i) => {
-                chartJSON.formattedDimensionListMap.set(d, formatedDimesionList[i]);
+                chartJSON.formattedDimensionListMap.set(d, formatedDimensionList[i]);
             });
         }
         catch (error) {
@@ -491,7 +488,7 @@ const WaterfallChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOption
     };
     const drawColumnChart = () => {
         getChartType(filteredData);
-        initXaxis(gTag, chartJSON, xLabel, formatOptions, xAxisObj[0], dataTableHeight, yScaleLeft, xAxis, dimensionHeightWidthArray, height, columnWidth, xAxisObj[0].dataType, innerWidth, innerHeight, chartJSON.legendList);
+        initXaxis(gTag, chartJSON, xLabel, formatOptions, dataTableHeight, yScaleLeft, xAxis, dimensionHeightWidthArray, height, columnWidth, isDateType, innerWidth, innerHeight, chartJSON.legendList);
         // commonAnnotations(
         //     seriesData,
         //     xScale,
@@ -524,10 +521,10 @@ const WaterfallChart = ({ title, data, yAxisObj, xAxisObj, chartId, formatOption
             let tempWaterFallData = [];
             let dataRequiredForWaterfall = []; //JSON.parse(JSON.stringify(chartData));
             let dataRequiredForStackTotal = []; //JSON.parse(JSON.stringify(chartData));
-            let seriesSlice = yAxisObj[0].legendData;
+            let seriesSlice = "";
             if (seriesSlice.length > 1) {
                 // seriesSlice.forEach(key => {
-                let tempSliceArr = seriesSlice[0].actualName;
+                let tempSliceArr = seriesSlice;
                 seriesData.forEach(entry => {
                     if (tempSliceArr === entry.properties.currentLegend) {
                         dataRequiredForWaterfall.push(entry);

package/dist/components/Charts/ChartsWithoutAxis/OtherCharts/OrganizationChart.js

@@ -3,15 +3,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as d3 from "d3";
 import { OrgChart } from "d3-org-chart";
 import { useEffect, useRef } from "react";
+import { logError } from "../../../../Services/ErrorLog";
 import { fontStyleOptions, } from "../../Core/Common.types";
-import { convertStringToNumber, drawChartTitle, firstFunctionBeforeRender, getNumberWithFormatFunction, initSvg, marginCalculationsForChartsWithoutLegends, } from "../../Core/CommonFunctions";
+import { convertStringToNumber, drawChartTitle, firstFunctionBeforeRender, getNumberWithFormatFunction, initSvg, marginCalculationsForChartsWithoutLegends } from "../../Core/CommonFunctions";
 import { chartMargins } from "../../Core/DefaultProperties.types";
 import { connectorStyle, orgChartDirection, orgChartLineType, orgChartNodeType, } from "../ChartsWithoutAxisTypes.types";
-import { logError } from "../../../../Services/ErrorLog";
 //#endregion
 const fileName = "OrganizationChart.tsx";
-const OrganizationChart = ({ data, legendEntries, chartId, formatOptions, legendSequence, }) => {
+const OrganizationChart = ({ data, formatOptions, legendEntries, legendSequence, }) => {
     //#region Variables
+    const chartId = crypto.randomUUID();
     const svgRef = useRef(); // Reference to the SVG element
     const floatingSvgRef = useRef(); // Reference to the SVG element
     let chartFormatOptions; // Format options for the chart

package/dist/components/Charts/Core/Common.types.d.ts

@@ -344,12 +344,12 @@ export type bubbleScatterData = {
     sizeValue: number;
 };
 export type TBubbleChartProps = {
-    chartId: string;
+    chartId?: string;
     clientWidth: number;
     clientHeight: number;
     data: bubbleScatterData[];
-    legendEntries: TLegendsFormatting[];
-    formatOptions: TDefaultChartFormatOptionsType;
+    legendEntries?: TLegendsFormatting[];
+    formatOptions?: TDefaultChartFormatOptionsType;
 };
 export declare const referenceLineTypes: {
     None: string;

package/dist/components/Charts/Core/CommonFunctions.js

@@ -1743,7 +1743,9 @@ export function generalizedChartData(chartData, dimensionList) {
                 properties = {
                     ...chartProperties,
                     legend: item.legend,
-                    currentLegend: item.legend
+                    currentLegend: item.legend,
+                    alias: item.legend,
+                    name: item.legend
                 };
             }
             else {

package/package.json

@@ -1,22 +1,32 @@
 {
   "name": "pace-chart-lib",
-  "version": "0.0.12",
-  "main": "dist/index.js",
-  "module": "./dist/index.js",
+  "version": "1.0.1",
+  "description": "A simple React + Vite + TS UI library with a Button using custom fonts via SCSS",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/pace-chart-lib.umd.js",
+  "module": "dist/pace-chart-lib.es.js",
   "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.js",
+      "import": "./dist/pace-chart-lib.es.js",
+      "require": "./dist/pace-chart-lib.umd.js",
       "types": "./dist/index.d.ts"
     }
   },
-  "files": [
-    "dist"
-  ],
   "scripts": {
-    "build": "tsc",
-    "dev": "tsc --watch"
+    "build": "vite build && tsc --emitDeclarationOnly --declaration --declarationDir dist --project tsconfig.json",
+    "dev": "vite",
+    "preview": "vite preview",
+    "clean": "rm -rf dist node_modules",
+    "watch": "vite build --watch"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -26,7 +36,13 @@
     "@types/d3": "^7.4.3",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "typescript": "^5.2.0"
+    "typescript": "^5.2.0",
+    "@vitejs/plugin-react": "^5.0.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "sass": "^1.92.0",
+    "vite": "^7.1.4",
+    "vite-plugin-css-injected-by-js": "^3.5.2"
   },
   "dependencies": {
     "d3": "^7.9.0",

package/dist/Components1/Charts/ChartsWithAxis/BarFamily/BarChart.d.ts

@@ -1,12 +0,0 @@
-import React from "react";
-interface BarChartProps {
-    title?: string;
-    width?: number;
-    height?: number;
-    data: {
-        label: string;
-        value: number;
-    }[];
-}
-declare const BarChart: React.FC<BarChartProps>;
-export default BarChart;

package/dist/Components1/Charts/ChartsWithAxis/BarFamily/BarChart.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const BarChart = ({ title, width = 400, height = 300, data }) => {
-    const barWidth = width / data.length;
-    return (_jsxs("div", { style: { width, height, border: "1px solid #ccc", padding: "10px" }, children: [_jsx("h3", { children: title || "Bar Chart" }), _jsx("svg", { width: width, height: height, children: data.map((item, index) => {
-                    const barHeight = item.value;
-                    return (_jsxs("g", { children: [_jsx("rect", { x: index * barWidth + 10, y: height - barHeight, width: barWidth - 20, height: barHeight, fill: "#0074d9" }), _jsx("text", { x: index * barWidth + barWidth / 2, y: height - 5, fontSize: "10", textAnchor: "middle", children: item.label })] }, index));
-                }) })] }));
-};
-export default BarChart;

package/dist/Components1/Charts/ChartsWithAxis/ChartsWithAxisFunctions.d.ts

@@ -1,46 +0,0 @@
-import * as d3 from "d3";
-import { TMargin } from "./ChartsWithAxisTypes.type";
-import { TChartJSON, TSeries } from "../ChartsWithAxis/ChartsWithAxisTypes.type";
-import { TDefaultChartFormatOptionsType } from "../Core/DefaultProperties";
-export declare function getRandomColor(): {
-    color: string;
-};
-export declare function calculateWidthHeightDynamically(content: any, fontSize: any, fontFamily: any, rotationDegree?: any, fixedWidth?: any): number[];
-export declare function getYAxisLabel(formatOptions: TDefaultChartFormatOptionsType, maxLegendLength: any): number;
-export declare function marginCalculation(width: any, height: any, maxNumberForPrimaryAxis: any, YmaxLeft: any, formatOptions: TDefaultChartFormatOptionsType, legendList: string[], dimensionList: string[]): {
-    Margin: TMargin;
-    Ylabel: any;
-    Xlabel: number;
-    Ytitle: number;
-    Xtitle: number;
-    dimensionHeightWidthArray: number[];
-    staticSvgInnerWidth: number;
-    chartTitleHeight: number;
-    legendMargin: number;
-};
-export declare function initSvg(svgRef: any, width: any, height: any): d3.Selection<any, unknown, null, undefined>;
-export declare function customYscaleLabelFormatting(formatOptions: TDefaultChartFormatOptionsType, YminLeft: number, YmaxLeft: number, YminRight: number, YmaxRight: number): {
-    maxNumberForPrimaryAxis: number;
-    maxNumberForSecondaryAxis: any;
-};
-export declare function getYaxisLabelList(dataMin: number, dataMax: number, axisLengthPx: number, labelWidthPx?: number): number[];
-export declare function getNumberWithFormat(displayUnits: any, numberFormat: any, decimalPrescision: any): (d: any) => string;
-export declare function responsiveYaxisMargin(maxNumberForPrimaryAxis: any, yMaxLeft: any, formatOptions: TDefaultChartFormatOptionsType): any;
-export declare function InitChartArea(svg: any, margin: any): any;
-export declare function InitChartFloatingArea(formatOptions: TDefaultChartFormatOptionsType, margin: any, floatingSvg: any, gTag: any, chartsWithXScrollFlag: any, chartsWithYScrollFlag: any): any;
-export declare function initBlackBox(g: any, formatOptions: TDefaultChartFormatOptionsType, dataTableHeight: any, innerWidth: any, innerHeight: any, chartType: any): void;
-export declare function isVerticallyOverlapping(obj1: any, obj2: any): boolean;
-export declare function responsiveYaxisLabel(Ymax: any, Ymin: any, innerWidth: any, innerHeight: any, formatOptions: TDefaultChartFormatOptionsType, chartJSON: TChartJSON): any[];
-export declare function getLabelsFromAlgo(dataMin: number, dataMax: number, axisLengthPx: number, labelWidthPx?: number): number[];
-export declare function initYaxis(gTag: any, formatOptions: TDefaultChartFormatOptionsType, dataTableHeight: any, Ylabel: any, YaxisLeft: any, innerHeight: any): any;
-export declare function responsiveXaxisLabel(dimenstionList: any, innerWidth: any): any[];
-export declare function initXaxis(gTag: any, chartJSON: any, Xlabel: any, formatOptions: TDefaultChartFormatOptionsType, xAxisObj: any, dataTableHeight: any, YscaleLeft: any, Xaxis: any, dimensionHeightWidthArray: any, height: any, barWidth: any, dataType: any, innerWidth: any, innerHeight: any): any;
-export declare function detectBrowserName(): string;
-export declare function setDateFormats(name: any, format: any, dimensionmarks: any, datasourceId?: any): any;
-export declare function initScrollingSvgClippath(formatOptions: TDefaultChartFormatOptionsType, Margin: any, width: any): void;
-export declare function drawSeriesLabels(formatOptions: TDefaultChartFormatOptionsType, floatingTagG: any, seriesLabels: any): void;
-export declare function setXaxistitle(formatOptions: TDefaultChartFormatOptionsType, barChart: any, svg: any, Margin: any, Xlabel: any, height: any, Xtitle: any, chartType: any, Ylabel: any, staticSvgInnerWidth: any, innerHeight: any): any;
-export declare function Yaxistitle(innerHeight: any, formatOptions: TDefaultChartFormatOptionsType, dataTableHeight: any, barChart: any, svg: any, Margin: any, Ytitle: any, Ylabel: any): any;
-export declare function setChartTitle(svg: any, formatOptions: TDefaultChartFormatOptionsType, width: any, chartTitleHeight: any): void;
-export declare function initSvgBox(svg: any, formatOptions: TDefaultChartFormatOptionsType, widgetId: any, chartsWithXScrollFlag: any, chartsWithYScrollFlag: any): any;
-export declare function lineAnnotations(chartData: TSeries[], Xscale: any, YscaleLeft: any, YscaleRight: any, Margin: any, d3Annotation: any, labelExcludeList: any, individualLabelColor: any, oldAnnotationList: any, formatOptions: TDefaultChartFormatOptionsType, chartType: any): void;