pace-chart-lib 0.0.7 → 0.0.8

package/dist/Components1/Charts/ChartsWithAxis/ChartsWithAxisTypes.type.d.ts

@@ -0,0 +1,169 @@
+import { TDefaultChartFormatOptionsType } from "../Core/DefaultProperties";
+export type TMargin = {
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+};
+export declare enum actualChartTypes {
+    waterfall = "Waterfall",
+    lineWithMarker = "LineWithMarker",
+    stackLine = "StackLine",
+    stackLine100 = "100StackLine",
+    line = "Line",
+    bar = "Bar",
+    stackColumn = "StackColumn",
+    area = "Area",
+    pie = "Pie",
+    sankey = "Sankey",
+    sunburst = "Sunburst",
+    horizontalBar = "HorizontalBar",
+    stackArea = "StackArea",
+    stackArea100 = "100StackArea",
+    treeMap = "TreeMap",
+    stackBar = "StackBar",
+    stackColumn100 = "100StackColumn",
+    stackBar100 = "100StackBar",
+    scatterPlot = "ScatterPlot",
+    customColumnChart = "CustomColumnChart",
+    customBarChart = "CustomBarChart",
+    histogram = "Histogram",
+    columnHistogram = "ColumnHistogram",
+    barHistogram = "BarHistogram",
+    column = "Column",
+    miscellaneous = "Miscellaneous",
+    custom = "Custom",
+    collapsableTree = "CollapsableTree",
+    maps = "Maps",
+    tornadoChart = "Tornado",
+    pieOfPie = "PieOfPie",
+    wordCloud = "WordCloud",
+    boxPlot = "BoxPlot",
+    bubblePlot = "BubblePlot",
+    vennDiagramChart = "VennDiagramChart",
+    speedometerChart = "SpeedometerChart",
+    layeredColumnChart = "LayeredColumnChart",
+    layeredBarChart = "LayeredBarChart",
+    organizationalChart = "OrganizationalChart",
+    pyramidChart = "PyramidChart",
+    scaleBreakStackedColumnChart = "ScaleBreakStackedColumnChart",
+    progressChart = "ProgressChart",
+    radialBarChart = "RadialBarChart"
+}
+export type TSeries = {
+    legend: string;
+    data: TDataPoint[];
+    properties: ILineData;
+};
+export type TDataPoint = {
+    dimension: string;
+    value: number;
+    legend: string;
+};
+export type TLineChartProps = {
+    title?: string;
+    width?: number;
+    height?: number;
+    data: TSeries[];
+    chartId: string;
+    formatOptions: TDefaultChartFormatOptionsType;
+    dataType: string;
+};
+export type TChartJSON = {
+    dimensionList: string[];
+    chartData: any[];
+    formatOptions: TDefaultChartFormatOptionsType;
+    chartType: string;
+    legendList: string[];
+    secondaryAxisDrawn: boolean;
+    yMaxLeft: number;
+    yMaxRight: number;
+    yMinLeft: number;
+    yMinRight: number;
+    hideZeroValues: boolean;
+    customYaxisMaxValue?: number;
+    customYaxisMinValue?: number;
+    secondaryCustomYaxisMaxValue?: number;
+    secondaryCustomYaxisMinValue?: number;
+    formattedDimensionListMap: Map<string, any>;
+};
+export interface IXaxisObject {
+    name: INameObject;
+    title: {
+        name: INameObject;
+    };
+    counter: number;
+    dataType: string;
+    dataSourceId: string;
+    groupBy?: string;
+}
+export interface INameObject {
+    actualName: string;
+    dataSourceId?: string;
+    name: string;
+    type: string;
+}
+export interface ILineData {
+    annotation?: number;
+    axis?: string;
+    color?: string;
+    legend?: string;
+    lineStyle?: string;
+    type?: string;
+    dimensions?: string[];
+    hideZeroValues?: boolean;
+    legendUniqueId?: string;
+    lineWidth?: number;
+    markerColor?: string;
+    markerShape?: string;
+    markerSize?: number;
+    maximumMeasure?: number;
+    measures?: number[];
+    minimumMeasure?: number;
+    seriesLabelVisibility?: boolean;
+    xAxisObject?: IXaxisObject;
+    fontStyle?: string[];
+    borderColor?: string;
+    disableConnector?: boolean;
+    disableLineStyle?: boolean;
+    actualChartType?: string;
+    endColor?: string;
+    stackBorderColor?: string;
+    valueFontColor?: string;
+    disableAnnotationPosition?: string;
+    name?: string;
+    startColor?: string;
+    disableAnnotation?: boolean;
+    labelFontSize?: number;
+    labelColor?: string;
+    borderStyle?: string;
+    nodeWidth?: number;
+    measureUniqueId?: string;
+    stackBorderWidth?: number;
+    dataLabelPosition?: number;
+    disableMarkerShape?: boolean;
+    disableMarkerColor?: boolean;
+    borderRadius?: number;
+    fontSize?: number;
+    valueFont?: string;
+    setColorScale?: boolean;
+    connector?: number;
+    areaBorderColor?: string;
+    labelFontStyle?: string[];
+    borderWidth?: number;
+    secondaryAxisBgColor?: string;
+    opacity?: number;
+    fontFamily?: string;
+    backgroundColor?: string;
+    valueFontStyle?: string[];
+    valueFontSize?: number;
+    labelFontColor?: string;
+    nodeHeight?: number;
+    disableDataLabelPosition?: boolean;
+    disableMarkerSize?: boolean;
+    annotationPosition?: number;
+    alias?: string;
+    stackBorderStyle?: number;
+    labelFont?: string;
+    individualAnnotationVisibility?: number;
+}

package/dist/Components1/Charts/ChartsWithAxis/ChartsWithAxisTypes.type.js

@@ -0,0 +1,47 @@
+export var actualChartTypes;
+(function (actualChartTypes) {
+    actualChartTypes["waterfall"] = "Waterfall";
+    actualChartTypes["lineWithMarker"] = "LineWithMarker";
+    actualChartTypes["stackLine"] = "StackLine";
+    actualChartTypes["stackLine100"] = "100StackLine";
+    actualChartTypes["line"] = "Line";
+    actualChartTypes["bar"] = "Bar";
+    actualChartTypes["stackColumn"] = "StackColumn";
+    actualChartTypes["area"] = "Area";
+    actualChartTypes["pie"] = "Pie";
+    actualChartTypes["sankey"] = "Sankey";
+    actualChartTypes["sunburst"] = "Sunburst";
+    actualChartTypes["horizontalBar"] = "HorizontalBar";
+    actualChartTypes["stackArea"] = "StackArea";
+    actualChartTypes["stackArea100"] = "100StackArea";
+    actualChartTypes["treeMap"] = "TreeMap";
+    actualChartTypes["stackBar"] = "StackBar";
+    actualChartTypes["stackColumn100"] = "100StackColumn";
+    actualChartTypes["stackBar100"] = "100StackBar";
+    actualChartTypes["scatterPlot"] = "ScatterPlot";
+    actualChartTypes["customColumnChart"] = "CustomColumnChart";
+    actualChartTypes["customBarChart"] = "CustomBarChart";
+    actualChartTypes["histogram"] = "Histogram";
+    actualChartTypes["columnHistogram"] = "ColumnHistogram";
+    actualChartTypes["barHistogram"] = "BarHistogram";
+    actualChartTypes["column"] = "Column";
+    actualChartTypes["miscellaneous"] = "Miscellaneous";
+    actualChartTypes["custom"] = "Custom";
+    actualChartTypes["collapsableTree"] = "CollapsableTree";
+    actualChartTypes["maps"] = "Maps";
+    actualChartTypes["tornadoChart"] = "Tornado";
+    actualChartTypes["pieOfPie"] = "PieOfPie";
+    actualChartTypes["wordCloud"] = "WordCloud";
+    actualChartTypes["boxPlot"] = "BoxPlot";
+    actualChartTypes["bubblePlot"] = "BubblePlot";
+    actualChartTypes["vennDiagramChart"] = "VennDiagramChart";
+    actualChartTypes["speedometerChart"] = "SpeedometerChart";
+    actualChartTypes["layeredColumnChart"] = "LayeredColumnChart";
+    actualChartTypes["layeredBarChart"] = "LayeredBarChart";
+    actualChartTypes["organizationalChart"] = "OrganizationalChart";
+    actualChartTypes["pyramidChart"] = "PyramidChart";
+    actualChartTypes["scaleBreakStackedColumnChart"] = "ScaleBreakStackedColumnChart";
+    actualChartTypes["progressChart"] = "ProgressChart";
+    actualChartTypes["radialBarChart"] = "RadialBarChart";
+})(actualChartTypes || (actualChartTypes = {}));
+;

package/dist/Components1/Charts/ChartsWithAxis/LineFamily/LineChart.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { TLineChartProps } from "../ChartsWithAxisTypes.type";
+declare const LineChart: React.FC<TLineChartProps>;
+export default LineChart;

package/dist/Components1/Charts/ChartsWithAxis/LineFamily/LineChart.js

@@ -0,0 +1,403 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+//#region Imports
+import { useEffect, useRef } from "react";
+import * as d3 from "d3";
+import * as d3Annotation from "d3-svg-annotation";
+import { marginCalculation, initSvg, customYscaleLabelFormatting, InitChartArea, initBlackBox, calculateWidthHeightDynamically, isVerticallyOverlapping, getNumberWithFormat, responsiveYaxisLabel, initYaxis, responsiveXaxisLabel, initXaxis, setDateFormats, drawSeriesLabels, setXaxistitle, Yaxistitle, setChartTitle, initSvgBox, lineAnnotations, } from "../ChartsWithAxisFunctions";
+import { legendsWithScroll } from "../core/CommonFunctions";
+import { legendShape } from "../core/Json.type";
+const LineChart = ({ title, width, height, data, dataType, chartId, formatOptions, }) => {
+    const chartType = "Line";
+    const svgRef = useRef();
+    const seriesData = data;
+    const barChart = false;
+    const chartsWithXScrollFlag = true;
+    const chartsWithYScrollFlag = false;
+    let chartJSON = {
+        dimensionList: [],
+        chartType: chartType,
+        chartData: [],
+        formatOptions: formatOptions,
+        legendList: [],
+        secondaryAxisDrawn: false,
+        yMaxLeft: 0,
+        yMaxRight: 0,
+        yMinLeft: 0,
+        yMinRight: 0,
+        hideZeroValues: false,
+        customYaxisMaxValue: parseFloat(formatOptions.yAxisLabel.yAxisMinText),
+        customYaxisMinValue: parseFloat(formatOptions.yAxisLabel.yAxisAutoText),
+        formattedDimensionListMap: new Map(),
+    };
+    const widgetId = chartId
+        ? "scaling-svg-" + chartId
+        : "scaling-svg-" + crypto.randomUUID();
+    //#region UseEffect
+    useEffect(() => {
+        createLineChart();
+    }, []);
+    //#endregion
+    const createLineChart = () => {
+        preprocessChartData();
+        //  this.customYaxisLabelFormatting(this.primaryAxisScaleValues[0], this.primaryAxisScaleValues[1], this.secondaryAxisScaleValues[0], this.secondaryAxisScaleValues[1]);
+        const { maxNumberForPrimaryAxis, maxNumberForSecondaryAxis } = customYscaleLabelFormatting(formatOptions, chartJSON.yMinLeft, chartJSON.yMaxLeft, chartJSON.yMinRight, chartJSON.yMaxRight);
+        const { Margin, Ylabel, Xlabel, Ytitle, Xtitle, dimensionHeightWidthArray, staticSvgInnerWidth, chartTitleHeight, legendMargin, } = marginCalculation(width, height, maxNumberForPrimaryAxis, chartJSON.yMaxLeft, formatOptions, chartJSON.legendList, chartJSON.dimensionList); //{ top: 20, right: 30, bottom: 30, left: 40 };
+        const innerWidth = width - Margin.left - Margin.right;
+        const innerHeight = height - Margin.top - Margin.bottom;
+        // initSvgContainer();  // to be added later
+        // dataTablePreCalculation();  // to be added later
+        const dataTableHeight = 0;
+        const barWidth = 0;
+        let svg = initSvg(svgRef.current, width, height); //d3.select(svgRef.current, width, height);
+        let gTag = InitChartArea(svg, Margin);
+        // const floattingGTag = InitChartFloatingArea(formatOptions, margin, floatingSvg, gTag, chartsWithXScrollFlag, chartsWithYScrollFlag);  // to be added later
+        initBlackBox(gTag, formatOptions, dataTableHeight, innerWidth, innerHeight, chartType);
+        const { YscaleLeft, Xscale, seriesLabels } = initScale(dataTableHeight, innerWidth, innerHeight);
+        // this.setDataLabels(); // no need of this function as we have drag/drop/delete option on every data label
+        const { YaxisLeft, Xaxis } = initAxis(Xscale, YscaleLeft, dataTableHeight, innerHeight, innerWidth);
+        gTag = initYaxis(gTag, formatOptions, dataTableHeight, Ylabel, YaxisLeft, innerHeight);
+        // initYaxisRight();  // will create after secondary axis
+        let floatingTagG = gTag; // for now lets assume
+        gTag = initXaxis(formatOptions.plotArea.fitChart ? gTag : floatingTagG, chartJSON, Xlabel, formatOptions, seriesData[0].properties.xAxisObject, dataTableHeight, YscaleLeft, Xaxis, dimensionHeightWidthArray, height, barWidth, dataType, innerWidth, innerHeight);
+        // initScrollingSvgClippath(formatOptions, Margin, width);   // for charts with scroll // to be added later
+        seriesData.forEach((data) => getChartType(data, gTag, Xscale, YscaleLeft));
+        // setDataTable();  // data tables to be added later
+        drawSeriesLabels(formatOptions, floatingTagG, seriesLabels);
+        svg = setXaxistitle(formatOptions, barChart, svg, Margin, Xlabel, height, Xtitle, chartJSON.chartType, Ylabel, staticSvgInnerWidth, innerHeight);
+        svg = Yaxistitle(innerHeight, formatOptions, dataTableHeight, barChart, svg, Margin, Ytitle, Ylabel);
+        // YaxistitleRight()   // to be added later
+        setChartTitle(svg, formatOptions, width, chartTitleHeight);
+        drawLegends(height, svg, dimensionHeightWidthArray, chartTitleHeight, width, legendMargin);
+        // LabelPosition: d.properties.dataLabelPosition,
+        // Labelcolor: d.properties.LabelColor,
+        // Axis: d.properties.Axis,
+        // all above properties to be embeded in seriesData[i].properties : Pending
+        lineAnnotations(seriesData, Xscale, YscaleLeft, YscaleLeft, // need to pass secondary axis scale if secondary axis is drawn
+        Margin, d3Annotation, [], //this.labelExcludeList,
+        [], //this.individualLabelColor,
+        [], //this.attributes.Id ? formatOptions.plotArea.dataLabelsCoordinates : this.parentReference.objService.tempAnnotationArray
+        formatOptions, chartType);
+        svg = initSvgBox(svg, formatOptions, widgetId, chartsWithXScrollFlag, chartsWithYScrollFlag);
+        // clear previous chart
+        // svg.selectAll("*").remove();
+        // const color = d3
+        //   .scaleOrdinal(d3.schemeCategory10)
+        //   .domain(seriesData.map((s) => s.legend));
+        // // X Axis
+        // const g = svg
+        //   .append("g")
+        //   .attr("transform", `translate(${Margin.left},${Margin.top})`);
+        // // Y Axis
+        // g.append("g").call(d3.axisLeft(yScale));
+        // g.append("g")
+        //   .attr("transform", `translate(0,${innerHeight})`)
+        //   .call(d3.axisBottom(xScale));
+    };
+    const preprocessChartData = () => {
+        chartJSON.chartData = seriesData.flatMap((s) => s.data); // Flattening the data from all series
+        chartJSON.dimensionList = Array.from(new Set(chartJSON.chartData.map((data) => data.dimension))); // getting unique x values as dimension list
+        chartJSON.yMaxLeft = d3.max(chartJSON.chartData, (data) => data.value); // max value from chart Data
+        chartJSON.yMinLeft = d3.min(chartJSON.chartData, (data) => data.value); // min value from chart Data
+        chartJSON.legendList = seriesData.map((data) => data.legend); // getting legend list from series data
+        let xAxisObject = seriesData[0].properties.xAxisObject;
+        let formatedDimesionList = (xAxisObject.groupBy == "NA" || xAxisObject.groupBy == undefined) &&
+            dataType === "DATE"
+            ? setDateFormats(xAxisObject.name.name, formatOptions.xAxisLabel.xAxisNumberFormat, chartJSON.dimensionList, xAxisObject.name.dataSourceId).map((d) => d[0])
+            : chartJSON.dimensionList;
+        chartJSON.dimensionList.forEach((d, i) => {
+            chartJSON.formattedDimensionListMap.set(d, formatedDimesionList[i]);
+        });
+    };
+    const initScale = (dataTableHeight, innerWidth, innerHeight) => {
+        let isPrimaryAxisDrawn = true;
+        let isSecondaryAxisDrawn = false;
+        let YscaleLeft;
+        if (isPrimaryAxisDrawn) {
+            YscaleLeft = d3
+                .scaleLinear()
+                .domain([
+                chartJSON.customYaxisMinValue !== undefined &&
+                    !Number.isNaN(chartJSON.customYaxisMinValue)
+                    ? chartJSON.customYaxisMinValue
+                    : chartJSON.yMinLeft < 0
+                        ? chartJSON.yMinLeft * 1.1
+                        : chartJSON.yMinLeft * 0.9,
+                chartJSON.yMaxLeft <= 0
+                    ? 0
+                    : chartJSON.customYaxisMaxValue !== undefined &&
+                        !Number.isNaN(chartJSON.customYaxisMaxValue)
+                        ? chartJSON.customYaxisMaxValue
+                        : chartJSON.yMaxLeft * 1.1,
+            ])
+                .range([
+                dataTableHeight > 0 ? innerHeight - dataTableHeight : innerHeight,
+                0,
+            ]);
+        }
+        // if (this.isSecondaryAxisDrawn) {
+        //   let YscaleRight = d3.scaleLinear()
+        //     .domain([
+        //       this.secondaryAxisScaleValues[0] >= 0
+        //         ? (this.secondaryCustomYaxisMinValue ||
+        //             this.secondaryCustomYaxisMinValue == 0) &&
+        //           !Number.isNaN(this.secondaryCustomYaxisMinValue)
+        //           ? this.secondaryCustomYaxisMinValue
+        //           : 0
+        //         : (this.secondaryCustomYaxisMinValue ||
+        //             this.secondaryCustomYaxisMinValue == 0) &&
+        //           !Number.isNaN(this.secondaryCustomYaxisMinValue)
+        //         ? this.secondaryCustomYaxisMinValue
+        //         : this.secondaryAxisScaleValues[0] * 1.1,
+        //       this.secondaryAxisScaleValues[1] <= 0
+        //         ? this.secondaryCustomYaxisMaxValue
+        //           ? this.secondaryCustomYaxisMaxValue
+        //           : 0
+        //         : this.secondaryCustomYaxisMaxValue
+        //         ? this.secondaryCustomYaxisMaxValue
+        //         : this.secondaryAxisScaleValues[1] * 1.1,
+        //     ])
+        //     .range([
+        //       this.dataTableHeight > 0
+        //         ? this.innerHeight - this.dataTableHeight
+        //         : this.innerHeight,
+        //       0,
+        //     ]);
+        // }
+        let calculatedRange = [0, innerWidth];
+        let seriesLabelWidth = undefined;
+        let seriesLabels = [];
+        if (formatOptions.seriesLabel.seriesLabelVisibility) {
+            let labelObj = prepareDataForSeriesLabel(innerWidth, YscaleLeft);
+            seriesLabels = labelObj.labelArray;
+            formatOptions.seriesLabel.seriesLabelPosition == "Right" &&
+                (seriesLabelWidth = labelObj.heightWidth[0]);
+            formatOptions.seriesLabel.seriesLabelPosition == "Right"
+                ? (calculatedRange = [0, innerWidth - labelObj.heightWidth[0]])
+                : (calculatedRange = [labelObj.heightWidth[0], innerWidth]);
+        }
+        let Xscale = d3
+            .scalePoint()
+            .domain(chartJSON.dimensionList)
+            .range(calculatedRange)
+            .padding(0.5);
+        return {
+            YscaleLeft,
+            Xscale,
+            seriesLabels,
+        };
+    };
+    const initAxis = (Xscale, YscaleLeft, dataTableHeight, innerHeight, innerWidth) => {
+        let customTickValue;
+        let seriesLabelWidth;
+        let isPrimaryAxisDrawn = true;
+        let Xaxis = d3
+            .axisBottom(Xscale)
+            .tickSize(formatOptions.plotArea.gridLinesVisibility
+            ? formatOptions.plotArea.gridLinesVeritcal
+                ? formatOptions.plotArea.gridLinesVeritcal
+                    ? -(dataTableHeight > 0
+                        ? innerHeight - dataTableHeight
+                        : innerHeight)
+                    : formatOptions.plotArea.ticksHeight *
+                        ((dataTableHeight > 0
+                            ? innerHeight - dataTableHeight
+                            : innerHeight) /
+                            100) *
+                        (formatOptions.xAxisLabel.xAxisPosition == 1 ? 1 : -1)
+                : 0
+            : 0)
+            .tickSizeOuter(0)
+            .tickValues(responsiveXaxisLabel(chartJSON.dimensionList, innerWidth));
+        let YaxisLeft;
+        if (isPrimaryAxisDrawn) {
+            YaxisLeft = d3
+                .axisLeft(YscaleLeft)
+                .tickFormat(getNumberWithFormat(formatOptions.yAxisLabel.yAxisDisplayUnits, formatOptions.yAxisLabel.yAxisNumberFormat, formatOptions.yAxisLabel.yAxisLabelDecimalPrecision))
+                .tickSize(formatOptions.plotArea.gridLinesVisibility
+                ? formatOptions.plotArea.gridLinesHorizontal
+                    ? -innerWidth + (seriesLabelWidth ? seriesLabelWidth : 0)
+                    : 0
+                : 0)
+                .tickValues(responsiveYaxisLabel(chartJSON.customYaxisMaxValue
+                ? chartJSON.customYaxisMaxValue
+                : chartJSON.yMaxLeft, chartJSON.yMinLeft, innerWidth, innerHeight, formatOptions, chartJSON))
+                .ticks(customTickValue
+                ? customTickValue
+                : dataTableHeight > 0
+                    ? (innerHeight - dataTableHeight) / 30
+                    : innerHeight / 30)
+                .tickSizeOuter(0);
+        }
+        // if (this.isSecondaryAxisDrawn) {
+        //   this.YaxisRight = axisRight(this.YscaleRight)
+        //     .tickFormat(
+        //       this.NumberFormat3ForSecondaryAxes(
+        //         formatOptions.SecondaryYAxisLabel.SecondaryYAxisDisplayUnits,
+        //         formatOptions.SecondaryYAxisLabel.SecondaryYAxisNumberFormat,
+        //         formatOptions.SecondaryYAxisLabel.SecondaryYAxisLabelDecimalPrecision
+        //       )
+        //     )
+        //     .tickValues(this.responsiveSecondaryYaxisLabel(this.secondaryCustomYaxisMaxValue ? this.secondaryCustomYaxisMaxValue : this.secondaryAxisScaleValues[1], this.secondaryAxisScaleValues[0]))
+        //     .ticks(this.secondaryCustomTickValue ? this.secondaryCustomTickValue : this.innerHeight / 30)
+        //     .tickSize( formatOptions.plotArea.gridLinesVisibility
+        //       ? formatOptions.plotArea.GridLinesHorizontal
+        //         ? -this.innerWidth
+        //         : 0
+        //       : 0
+        //     )
+        //     .tickSizeOuter(0)
+        //   this.initYaxisRight();
+        // }
+        return {
+            YaxisLeft,
+            Xaxis,
+        };
+    };
+    const prepareDataForSeriesLabel = (innerWidth, YscaleLeft) => {
+        // try {
+        let isSecondaryAxisDrawn = false;
+        let seriesApplied = formatOptions.seriesLabel.seriesLabelApplySeries;
+        let seriesPosition = formatOptions.seriesLabel.seriesLabelPosition;
+        let seriesLabelData = [];
+        //finding longest legend
+        let longestLegend = seriesData[0].legend;
+        //calculate node height and width dynamically
+        let hwObject = calculateWidthHeightDynamically(longestLegend, formatOptions.seriesLabel.seriesLabelFontSize, formatOptions.seriesLabel.seriesLabelFontFamily);
+        seriesData.forEach((lineData) => {
+            let isVisible = false;
+            seriesApplied == 1
+                ? (isVisible = true)
+                : (isVisible = lineData.properties.seriesLabelVisibility);
+            if (isVisible) {
+                let seriesObject = {};
+                //Checking for position
+                let measureObject = seriesPosition == "Right"
+                    ? lineData.data[lineData.data.length - 1]
+                    : lineData.data[0];
+                if (lineData.properties.axis == "Primary") {
+                    seriesObject["yPosition"] =
+                        YscaleLeft(measureObject.value) - hwObject[1] / 2;
+                }
+                // else {
+                //   seriesObject["yPosition"] =
+                //     this.YscaleRight(measureObject.value) - hwObject[1] / 2;
+                // }
+                seriesObject["isVisible"] = isVisible;
+                seriesObject["seriesValue"] = lineData.legend;
+                seriesObject["height"] = hwObject[1];
+                seriesObject["width"] = hwObject[0];
+                let isCollidingWithPrevious = false;
+                if (seriesLabelData.length > 0) {
+                    seriesLabelData.some((previousData) => {
+                        if (!isCollidingWithPrevious) {
+                            isCollidingWithPrevious = isVerticallyOverlapping(previousData, seriesObject);
+                        }
+                    });
+                }
+                isVisible &&
+                    !isCollidingWithPrevious &&
+                    seriesLabelData.push(seriesObject);
+            }
+            else {
+                return;
+            }
+        });
+        longestLegend = "";
+        seriesLabelData.forEach((seriesData) => {
+            if (seriesData.seriesValue.length > longestLegend.length) {
+                longestLegend = seriesData.seriesValue;
+            }
+        });
+        hwObject = calculateWidthHeightDynamically(longestLegend, formatOptions.seriesLabel.seriesLabelFontSize, formatOptions.seriesLabel.seriesLabelFontFamily);
+        hwObject[0] = hwObject[0] + 20;
+        seriesLabelData.forEach((seriesData) => {
+            seriesData["height"] = hwObject[1];
+            seriesData["width"] = hwObject[0];
+            seriesData["xPosition"] =
+                seriesPosition == "Right"
+                    ? innerWidth + (isSecondaryAxisDrawn ? 10 : 0) - hwObject[0] - 10
+                    : 5;
+        });
+        return { labelArray: seriesLabelData, heightWidth: hwObject };
+        // } catch (error) {
+        // this.loggerService.logError(error, {
+        //   componentName: this.constructor.name,
+        //   functionName: "prepareDataForSeriesLabel",
+        // });
+    };
+    const getChartType = (lineData, gTag, xScale, yScale) => {
+        const lineGenerator = d3
+            .line()
+            .x((d) => xScale(d.dimension)
+            ? xScale(d.dimension)
+            : null)
+            .y((d) => lineData.properties.axis == "Primary"
+            ? yScale(d.value)
+            : yScale(d.value));
+        // .defined((d) => (this.HideZeroValues || d.hideZero ? d.value : true))
+        // .curve(this.getCurveType());
+        const lines = gTag
+            .append("g")
+            .attr("class", "lines")
+            .attr("class", "parentGroup");
+        //Lines
+        lines
+            .append("g")
+            .selectAll("#scaling-svg" + widgetId + " .line-group")
+            .data([lineData])
+            .enter()
+            .append("g")
+            // .attr("hoverId", (d,index) =>  d.Legend.replace(/ /g, "-"))
+            .append("path")
+            .attr("class", "line")
+            .attr("d", (d, i) => lineGenerator(d.data))
+            .attr("stroke", (d) => d.properties.color !== "#ffffff" ? d.properties.color : "none")
+            .attr("stroke-dasharray", (d) => d.properties.lineStyle === "Dotted"
+            ? "0,3"
+            : d.properties.lineStyle === "Dashed"
+                ? "20,10,5,5,5,10"
+                : "")
+            .attr("stroke-linecap", (d) => d.properties.lineStyle === "Dotted" ? "round" : "")
+            .attr("fill", "none")
+            .attr("stroke-width", (d) => d.properties.lineStyle !== "None" ? d.properties.linewidth : "0");
+        // .attr("clip-path", `url(#${this.uniqueID})`);
+    };
+    const drawLegends = (height, svg, maxLegendDimensions, chartTitleHeight, width, legendMargin) => {
+        try {
+            // to set default values for newly added legend props for old saved reports.
+            // let alignment = formatOptions.Legends.LegendAlignment === undefined ? formatOptions.Legends.LegendAlignment = "Top" : null;
+            // formatOptions.Legends.LegendAlignmentTopBottom === undefined ? formatOptions.Legends.LegendAlignmentTopBottom = "Start" : null;
+            // let position = formatOptions.Legends.LegendPosition;
+            let position = formatOptions.legends.legendPosition;
+            let horizontalLegendAlignment = formatOptions.legends.legendAlignmentTopBottom;
+            let verticalLegendAlignment = formatOptions.legends.legendAlignment;
+            switch (position) {
+                case "None":
+                    break;
+                case "Right":
+                    let heightRight = !formatOptions.plotArea.fitChart
+                        ? height - chartTitleHeight - 20
+                        : height - chartTitleHeight - 10;
+                    legendsWithScroll(svg, seriesData, width - maxLegendDimensions[0] - 30, chartTitleHeight + 5, legendMargin + 25, heightRight, position, verticalLegendAlignment, legendShape.line, formatOptions, widgetId);
+                    break;
+                case "Top":
+                    legendsWithScroll(svg, seriesData, 7, chartTitleHeight + 5, width - 10, 30, position, horizontalLegendAlignment, legendShape.line, formatOptions, widgetId);
+                    break;
+                case "Left":
+                    let heightLeft = !formatOptions.plotArea.fitChart
+                        ? height - chartTitleHeight - 20
+                        : height - chartTitleHeight - 10;
+                    legendsWithScroll(svg, seriesData, 7, chartTitleHeight + 5, legendMargin + 25, heightLeft, position, verticalLegendAlignment, legendShape.line, formatOptions, widgetId);
+                    break;
+                case "Bottom":
+                    legendsWithScroll(svg, seriesData, 7, height - 25, width - 10, 30, position, horizontalLegendAlignment, legendShape.line, formatOptions, widgetId);
+                    break;
+            }
+        }
+        catch (error) {
+            console.log(error);
+        }
+    };
+    return (_jsxs("div", { children: [_jsx("h3", { children: title || "Line Chart" }), _jsx("div", { style: { width, height, border: "1px solid #ccc", padding: "10px" }, children: _jsx("svg", { ref: svgRef, id: widgetId, width: width, height: height }) })] }));
+};
+export default LineChart;

package/dist/Components1/Charts/Core/Common.type.d.ts

@@ -0,0 +1,8 @@
+export declare enum legendShape {
+    rectangle = "rectangle",
+    circle = "circle",
+    hollowCircle = "hollowCircle",
+    areaWithLine = "areaWithLine",
+    line = "line",
+    custom = "custom"
+}

package/dist/Components1/Charts/Core/Common.type.js

@@ -0,0 +1,9 @@
+export var legendShape;
+(function (legendShape) {
+    legendShape["rectangle"] = "rectangle";
+    legendShape["circle"] = "circle";
+    legendShape["hollowCircle"] = "hollowCircle";
+    legendShape["areaWithLine"] = "areaWithLine";
+    legendShape["line"] = "line";
+    legendShape["custom"] = "custom";
+})(legendShape || (legendShape = {}));

package/dist/Components1/Charts/Core/CommonFunctions.d.ts

@@ -0,0 +1,12 @@
+import { TSeries } from "../ChartsWithAxis/ChartsWithAxisTypes.type";
+import { TDefaultChartFormatOptionsType } from "./DefaultProperties";
+export declare function getRandomColor(): {
+    color: string;
+};
+export declare function getCircleShape(d: any, innerDiv: any): void;
+export declare function getHollowCircleShape(d: any, innerDiv: any): void;
+export declare function getLineShape(d: any, innerDiv: any, formatOptions: TDefaultChartFormatOptionsType): void;
+export declare function getAreaShape(d: any, innerDiv: any, formatOptions: any): void;
+export declare function getReactShape(d: any, innerDiv: any): void;
+export declare const legendsWithScroll: (svg: any, seriesData: TSeries[], x: number, y: number, width: number, height: number, legendPosition: string, alignment: string, shape: string, chartFormatOptions: TDefaultChartFormatOptionsType, chartId: string) => void;
+export declare function calculateMaxLegendWidth(list: any, formatOptions: any): number[];