pace-chart-lib 0.0.11 → 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 (2) hide show
  1. package/dist/components/Charts/Core/CommonFunctions.js +130 -128
  2. package/package.json +1 -1
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.11",
3
+ "version": "0.0.12",
4
4
  "main": "dist/index.js",
5
5
  "module": "./dist/index.js",
6
6
  "types": "dist/index.d.ts",