pace-chart-lib 0.0.10 → 0.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/dist/components/Charts/ChartsWithAxis/AreaFamily/AreaChart.js +7 -6
  2. package/dist/components/Charts/ChartsWithAxis/AreaFamily/NormalizedStackAreaChart.js +3 -3
  3. package/dist/components/Charts/ChartsWithAxis/AreaFamily/StackAreaChart.js +7 -6
  4. package/dist/components/Charts/ChartsWithAxis/ChartsWithAxisFunctions.d.ts +5 -2
  5. package/dist/components/Charts/ChartsWithAxis/ChartsWithAxisFunctions.js +47 -30
  6. package/dist/components/Charts/ChartsWithAxis/ColumnFamily/ColumnChart.js +7 -6
  7. package/dist/components/Charts/ChartsWithAxis/ColumnFamily/ColumnHistogramChart.js +2 -2
  8. package/dist/components/Charts/ChartsWithAxis/ColumnFamily/CustomColumnChart.js +7 -6
  9. package/dist/components/Charts/ChartsWithAxis/ColumnFamily/LayeredColumnChart.js +7 -6
  10. package/dist/components/Charts/ChartsWithAxis/ColumnFamily/NormalizedStackColumnChart.js +5 -4
  11. package/dist/components/Charts/ChartsWithAxis/ColumnFamily/StackColumnChart.js +7 -6
  12. package/dist/components/Charts/ChartsWithAxis/HorizontalBarFamily/HorizontalBarChart.js +10 -9
  13. package/dist/components/Charts/ChartsWithAxis/HorizontalBarFamily/HorizontalHistogramChart.js +8 -7
  14. package/dist/components/Charts/ChartsWithAxis/HorizontalBarFamily/LayeredHorizontalBarChart.js +8 -7
  15. package/dist/components/Charts/ChartsWithAxis/HorizontalBarFamily/NormalizedStackHorizontalBarChart.js +4 -4
  16. package/dist/components/Charts/ChartsWithAxis/HorizontalBarFamily/StackHorizontalBarChart.js +9 -8
  17. package/dist/components/Charts/ChartsWithAxis/LineFamily/LineChart.js +7 -6
  18. package/dist/components/Charts/ChartsWithAxis/LineFamily/NormalizedStackLineChart.js +3 -3
  19. package/dist/components/Charts/ChartsWithAxis/LineFamily/StackLineChart.js +8 -6
  20. package/dist/components/Charts/ChartsWithAxis/MiscellaneousChartFamily/TornadoChart.js +3 -3
  21. package/dist/components/Charts/ChartsWithAxis/MiscellaneousChartFamily/WaterfallChart.js +7 -6
  22. package/dist/components/Charts/ChartsWithoutAxis/ChartsWithoutAxisTypes.types.d.ts +2 -2
  23. package/dist/components/Charts/ChartsWithoutAxis/OtherCharts/ProgressChart.js +2 -2
  24. package/dist/components/Charts/ChartsWithoutAxis/OtherCharts/PyramidChart.js +6 -6
  25. package/dist/components/Charts/ChartsWithoutAxis/OtherCharts/RadialBarChart.js +7 -7
  26. package/dist/components/Charts/ChartsWithoutAxis/OtherCharts/Speedometer.js +5 -5
  27. package/dist/components/Charts/ChartsWithoutAxis/PieFamily/DonutChart.js +3 -3
  28. package/dist/components/Charts/ChartsWithoutAxis/PieFamily/PieChart.js +3 -3
  29. package/dist/components/Charts/ChartsWithoutAxis/PieFamily/TreemapChart.js +1 -1
  30. package/dist/components/Charts/Core/CommonFunctions.js +130 -128
  31. package/package.json +1 -1
package/dist/components/Charts/ChartsWithoutAxis/PieFamily/PieChart.js CHANGED
@@ -13,7 +13,7 @@ import { logError } from "../../../../Services/ErrorLog";
13
13
  const fileName = "PieChart.tsx";
14
14
  const PieChart = ({ data, formatOptions, chartId }) => {
15
15
  const svgRef = useRef(); // Reference to the SVG element
16
- const seriesData = generalizedChartData(data); // Data for the pie chart, expected to be in TSeries format
16
+ const seriesData = generalizedChartData(data.ChartData); // Data for the pie chart, expected to be in TSeries format
17
17
  let chartFormatOptions; // Format options for the chart.
18
18
  let height; // svg total height
19
19
  let width; // svg total height
@@ -51,7 +51,7 @@ const PieChart = ({ data, formatOptions, chartId }) => {
51
51
  const loopOverSeriesData = () => {
52
52
  try {
53
53
  pieTotalValue = 0;
54
- data.forEach((d) => {
54
+ seriesData.forEach((d) => {
55
55
  d.properties.dataLabelPosition == "2"
56
56
  ? (outsideDataLabelFlag = true)
57
57
  : null;
@@ -79,7 +79,7 @@ const PieChart = ({ data, formatOptions, chartId }) => {
79
79
  .value((d) => d.data[0].value)
80
80
  .startAngle(((rotationAngle ?? 0) * (Math.PI / 180)) % 360)
81
81
  .endAngle((((rotationAngle ?? 0) + 360) * (Math.PI / 180)) % 360);
82
- let pieData = pie(data);
82
+ let pieData = pie(seriesData);
83
83
  pieChartData = pieData.map((d, i) => ({
84
84
  ...d,
85
85
  x0: d.startAngle,
package/dist/components/Charts/ChartsWithoutAxis/PieFamily/TreemapChart.js CHANGED
@@ -41,7 +41,7 @@ const Treemap = ({ data, formatOptions, chartId }) => {
41
41
  try {
42
42
  const rawData = {
43
43
  name: "root",
44
- children: data,
44
+ children: data.ChartData,
45
45
  }; // Creating hierarchy data structure for D3 treemap
46
46
  const root = d3
47
47
  .hierarchy(rawData)
package/dist/components/Charts/Core/CommonFunctions.js CHANGED
@@ -731,139 +731,141 @@ export const findStringWithLongestLength = (data, key) => {
731
731
  */
732
732
  export const legendsWithScroll = (svg, seriesData, x, y, width, height, legendPosition, alignment, legendShape, chartFormatOptions, chartId, isVennChart = false) => {
733
733
  try {
734
- let justifyContent = "";
735
- let flexDirection = "";
736
- if (legendPosition == staticLegendPosition.left || legendPosition == staticLegendPosition.right) {
737
- flexDirection = "column";
738
- justifyContent =
739
- alignment == verticalLegendAllignment.top ? "start" : alignment == verticalLegendAllignment.middle ? "center" : "end";
740
- }
741
- else {
742
- flexDirection = "row";
743
- justifyContent =
744
- alignment == horizontalLegendAllignment.start
745
- ? "start"
746
- : alignment == horizontalLegendAllignment.middle
747
- ? "center"
748
- : "end";
749
- }
750
- let object = svg
751
- .append("foreignObject")
752
- .attr("x", x)
753
- .attr("y", y)
754
- .style("pointer-events", "auto")
755
- .attr("width", width + "px")
756
- .attr("height", height + "px")
757
- .style("user-select", "none");
758
- var div = object
759
- .append("xhtml:div")
760
- .attr("id", "legendObject" + chartId)
761
- .attr("class", "legendsBoxWrapper")
762
- .style("width", width + "px")
763
- .style("display", "flex")
764
- .style("height", height - 1 + "px")
765
- .style("overflow", "auto")
766
- .style("pointer-events", "auto")
767
- .style("justify-content", justifyContent)
768
- .style("flex-direction", flexDirection)
769
- .style("outline-offset", '-' + chartFormatOptions.legends.legendBorderThickness + "px")
770
- .style("outline", chartFormatOptions.legends.legendBorder
771
- ? `${chartFormatOptions.legends.legendBorderThickness +
772
- "px" +
773
- " solid" +
774
- chartFormatOptions.legends.legendBorderColor}`
775
- : "none")
776
- .append("div")
777
- // .style("width", "100%")
778
- .attr("class", "scrollbar")
779
- .style("display", "flex")
780
- .style("justify-content", justifyContent)
781
- .style("flex-direction", flexDirection)
782
- .style("flex-wrap", "nowrap")
783
- .style("padding-left", "3px");
784
- if (legendPosition == staticLegendPosition.top || legendPosition == staticLegendPosition.bottom)
785
- div.style("flex-direction", "row");
786
- seriesData.forEach((d, i) => {
787
- let innerdiv = div
734
+ if (chartFormatOptions.legends.legendVisibility) {
735
+ let justifyContent = "";
736
+ let flexDirection = "";
737
+ if (legendPosition == staticLegendPosition.left || legendPosition == staticLegendPosition.right) {
738
+ flexDirection = "column";
739
+ justifyContent =
740
+ alignment == verticalLegendAllignment.top ? "start" : alignment == verticalLegendAllignment.middle ? "center" : "end";
741
+ }
742
+ else {
743
+ flexDirection = "row";
744
+ justifyContent =
745
+ alignment == horizontalLegendAllignment.start
746
+ ? "start"
747
+ : alignment == horizontalLegendAllignment.middle
748
+ ? "center"
749
+ : "end";
750
+ }
751
+ let object = svg
752
+ .append("foreignObject")
753
+ .attr("x", x)
754
+ .attr("y", y)
755
+ .style("pointer-events", "auto")
756
+ .attr("width", width + "px")
757
+ .attr("height", height + "px")
758
+ .style("user-select", "none");
759
+ var div = object
760
+ .append("xhtml:div")
761
+ .attr("id", "legendObject" + chartId)
762
+ .attr("class", "legendsBoxWrapper")
763
+ .style("width", width + "px")
764
+ .style("display", "flex")
765
+ .style("height", height - 1 + "px")
766
+ .style("overflow", "auto")
767
+ .style("pointer-events", "auto")
768
+ .style("justify-content", justifyContent)
769
+ .style("flex-direction", flexDirection)
770
+ .style("outline-offset", '-' + chartFormatOptions.legends.legendBorderThickness + "px")
771
+ .style("outline", chartFormatOptions.legends.legendBorder
772
+ ? `${chartFormatOptions.legends.legendBorderThickness +
773
+ "px" +
774
+ " solid" +
775
+ chartFormatOptions.legends.legendBorderColor}`
776
+ : "none")
788
777
  .append("div")
789
- .style("display", "inline-flex")
790
- .style("justify-content", "flex-start")
791
- .style("align-items", "center")
792
- .style("width", "fit-content")
793
- .style("margin", "3px 0px")
778
+ // .style("width", "100%")
779
+ .attr("class", "scrollbar")
780
+ .style("display", "flex")
781
+ .style("justify-content", justifyContent)
782
+ .style("flex-direction", flexDirection)
794
783
  .style("flex-wrap", "nowrap")
795
- .style("white-space", "nowrap")
796
- .on("mousemove", function (d) {
797
- if (chartFormatOptions.legends.onHoverEffect) {
798
- svg
799
- .selectAll(".parentGroup")
800
- .classed("highlight", false)
801
- .classed("unhighlight", true);
802
- svg
803
- .selectAll('[hoverId="' + this.textContent.replace(/ /g, "-") + '"]')
804
- .classed("highlight", true)
805
- .classed("unhighlight", false);
784
+ .style("padding-left", "3px");
785
+ if (legendPosition == staticLegendPosition.top || legendPosition == staticLegendPosition.bottom)
786
+ div.style("flex-direction", "row");
787
+ seriesData.forEach((d, i) => {
788
+ let innerdiv = div
789
+ .append("div")
790
+ .style("display", "inline-flex")
791
+ .style("justify-content", "flex-start")
792
+ .style("align-items", "center")
793
+ .style("width", "fit-content")
794
+ .style("margin", "3px 0px")
795
+ .style("flex-wrap", "nowrap")
796
+ .style("white-space", "nowrap")
797
+ .on("mousemove", function (d) {
798
+ if (chartFormatOptions.legends.onHoverEffect) {
799
+ svg
800
+ .selectAll(".parentGroup")
801
+ .classed("highlight", false)
802
+ .classed("unhighlight", true);
803
+ svg
804
+ .selectAll('[hoverId="' + this.textContent.replace(/ /g, "-") + '"]')
805
+ .classed("highlight", true)
806
+ .classed("unhighlight", false);
807
+ }
808
+ })
809
+ .on("mouseout", function (d) {
810
+ if (chartFormatOptions.legends.onHoverEffect) {
811
+ svg
812
+ .selectAll(".parentGroup")
813
+ .classed("highlight", false)
814
+ .classed("unhighlight", false);
815
+ svg
816
+ .selectAll('[hoverId="' + this.textContent.replace(/ /g, "-") + '"]')
817
+ .classed("highlight", false)
818
+ .classed("unhighlight", false);
819
+ }
820
+ });
821
+ if (legendPosition == staticLegendPosition.top || legendPosition == staticLegendPosition.bottom) {
822
+ innerdiv.style("margin-right", isVennChart ? "0px" : "16px").style("white-space", "nowrap");
806
823
  }
807
- })
808
- .on("mouseout", function (d) {
809
- if (chartFormatOptions.legends.onHoverEffect) {
810
- svg
811
- .selectAll(".parentGroup")
812
- .classed("highlight", false)
813
- .classed("unhighlight", false);
814
- svg
815
- .selectAll('[hoverId="' + this.textContent.replace(/ /g, "-") + '"]')
816
- .classed("highlight", false)
817
- .classed("unhighlight", false);
824
+ if (legendShape == staticLegendShape.circle) {
825
+ getCircleShape(d, innerdiv);
818
826
  }
819
- });
820
- if (legendPosition == staticLegendPosition.top || legendPosition == staticLegendPosition.bottom) {
821
- innerdiv.style("margin-right", isVennChart ? "0px" : "16px").style("white-space", "nowrap");
822
- }
823
- if (legendShape == staticLegendShape.circle) {
824
- getCircleShape(d, innerdiv);
825
- }
826
- else if (legendShape == staticLegendShape.circle) {
827
- getHollowCircleShape(d, innerdiv);
828
- }
829
- else if (legendShape == staticLegendShape.line) {
830
- getLineShape(d, innerdiv, chartFormatOptions);
831
- }
832
- else if (legendShape == staticLegendShape.areaWithLine) {
833
- getAreaShape(d, innerdiv, chartFormatOptions);
834
- }
835
- else if (legendShape == staticLegendShape.rectangle) {
836
- getReactShape(d, innerdiv);
837
- }
838
- let vennSaparator = (isVennChart && (legendPosition == staticLegendPosition.bottom || legendPosition == staticLegendPosition.top)) ? (i != seriesData.length - 1 ? ' |' : '') : '';
839
- let legendColor = isVennChart ? chartFormatOptions.legends.legendSelectedUnicolor :
840
- (chartFormatOptions.legends.legendColorMode == legendColorMode.multiColor)
841
- ? d.properties.color
827
+ else if (legendShape == staticLegendShape.circle) {
828
+ getHollowCircleShape(d, innerdiv);
829
+ }
830
+ else if (legendShape == staticLegendShape.line) {
831
+ getLineShape(d, innerdiv, chartFormatOptions);
832
+ }
833
+ else if (legendShape == staticLegendShape.areaWithLine) {
834
+ getAreaShape(d, innerdiv, chartFormatOptions);
835
+ }
836
+ else if (legendShape == staticLegendShape.rectangle) {
837
+ getReactShape(d, innerdiv);
838
+ }
839
+ let vennSaparator = (isVennChart && (legendPosition == staticLegendPosition.bottom || legendPosition == staticLegendPosition.top)) ? (i != seriesData.length - 1 ? ' |' : '') : '';
840
+ let legendColor = isVennChart ? chartFormatOptions.legends.legendSelectedUnicolor :
841
+ (chartFormatOptions.legends.legendColorMode == legendColorMode.multiColor)
842
842
  ? d.properties.color
843
- : "#000000"
844
- : chartFormatOptions.legends.legendSelectedUnicolor;
845
- innerdiv
846
- .append("div")
847
- .style("margin-left", "5px")
848
- .style("color", legendColor)
849
- .style("font-size", (!isVennChart ? d.properties.fontSize : chartFormatOptions.legends.legendFontSize) + "px")
850
- .style("font-family", !isVennChart ? d.properties.fontFamily : chartFormatOptions.legends.legendFontFamily)
851
- .style("font-style", () => {
852
- let style = !isVennChart ? d.properties.fontStyle : chartFormatOptions.legends.legendFontStyle;
853
- return style.includes(fontStyleOptions.italic) ? fontStyleOptions.italic : "";
854
- })
855
- .style("text-decoration", () => {
856
- let style = !isVennChart ? d.properties.fontStyle : chartFormatOptions.legends.legendFontStyle;
857
- return style.includes(fontStyleOptions.underline) ? fontStyleOptions.underline : "";
858
- })
859
- .style("font-weight", () => {
860
- let style = !isVennChart ? d.properties.fontStyle : chartFormatOptions.legends.legendFontStyle;
861
- return style.includes(fontStyleOptions.bold) ? fontStyleOptions.bold : "";
862
- })
863
- .style("white-space", "nowrap")
864
- .attr("title", !isVennChart ? d.properties.alias : d.legendDisplay + ' : ' + d.actualValue)
865
- .html(!isVennChart ? d.properties.alias : d.legendDisplay + ' : ' + d.actualValue + vennSaparator);
866
- });
843
+ ? d.properties.color
844
+ : "#000000"
845
+ : chartFormatOptions.legends.legendSelectedUnicolor;
846
+ innerdiv
847
+ .append("div")
848
+ .style("margin-left", "5px")
849
+ .style("color", legendColor)
850
+ .style("font-size", (!isVennChart ? d.properties.fontSize : chartFormatOptions.legends.legendFontSize) + "px")
851
+ .style("font-family", !isVennChart ? d.properties.fontFamily : chartFormatOptions.legends.legendFontFamily)
852
+ .style("font-style", () => {
853
+ let style = !isVennChart ? d.properties.fontStyle : chartFormatOptions.legends.legendFontStyle;
854
+ return style.includes(fontStyleOptions.italic) ? fontStyleOptions.italic : "";
855
+ })
856
+ .style("text-decoration", () => {
857
+ let style = !isVennChart ? d.properties.fontStyle : chartFormatOptions.legends.legendFontStyle;
858
+ return style.includes(fontStyleOptions.underline) ? fontStyleOptions.underline : "";
859
+ })
860
+ .style("font-weight", () => {
861
+ let style = !isVennChart ? d.properties.fontStyle : chartFormatOptions.legends.legendFontStyle;
862
+ return style.includes(fontStyleOptions.bold) ? fontStyleOptions.bold : "";
863
+ })
864
+ .style("white-space", "nowrap")
865
+ .attr("title", !isVennChart ? d.properties.alias : d.legendDisplay + ' : ' + d.actualValue)
866
+ .html(!isVennChart ? d.properties.alias : d.legendDisplay + ' : ' + d.actualValue + vennSaparator);
867
+ });
868
+ }
867
869
  }
868
870
  catch (error) {
869
871
  logError(fileName, "legendsWithScroll", error);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pace-chart-lib",
3
- "version": "0.0.10",
3
+ "version": "0.0.12",
4
4
  "main": "dist/index.js",
5
5
  "module": "./dist/index.js",
6
6
  "types": "dist/index.d.ts",