axidio-styleguide-library1-v2 0.2.70 → 0.2.71

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 (4) hide show
  1. package/esm2022/lib/horizontal-grouped-bar-with-scroll-zoom/horizontal-grouped-bar-with-scroll-zoom.component.mjs +4 -1238
  2. package/fesm2022/axidio-styleguide-library1-v2.mjs +3 -1237
  3. package/fesm2022/axidio-styleguide-library1-v2.mjs.map +1 -1
  4. package/package.json +1 -1
package/fesm2022/axidio-styleguide-library1-v2.mjs CHANGED
@@ -7625,1242 +7625,6 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
7625
7625
  get isAlertEnabled() {
7626
7626
  return this.chartConfiguration?.headerMenuOptions?.some((option) => option.id === 'editAlert');
7627
7627
  }
7628
- // initializegroupChart() {
7629
- // var self = this;
7630
- // let data = [];
7631
- // let metaData: any = null;
7632
- // let keyList = null;
7633
- // let lineData = null;
7634
- // let colorMap = {};
7635
- // var formatFromBackend;
7636
- // var formatForHugeNumbers;
7637
- // const isMobile = window.innerWidth < 576;
7638
- // const isTablet = window.innerWidth >= 576 && window.innerWidth < 992;
7639
- // const isDesktop = window.innerWidth >= 992;
7640
- // let isria = this.customChartConfiguration.isRia
7641
- // var x: any;
7642
- // var alternate_text = false;
7643
- // var short_tick_length = 4;
7644
- // var long_tick_length = 16;
7645
- // /**
7646
- // * longer tick length needed for weekly charts
7647
- // */
7648
- // var short_tick_length_bg = 5;
7649
- // var long_tick_length_bg = 30;
7650
- // var leftAndRightSpaces = 50;
7651
- // var rightSvgWidth = 60;
7652
- // var tempScale;
7653
- // for (var i in this.defaultConfiguration) {
7654
- // this.chartConfiguration[i] = ChartHelper.getValueByConfigurationType(
7655
- // i,
7656
- // this.defaultConfiguration,
7657
- // this.customChartConfiguration
7658
- // );
7659
- // }
7660
- // data = this.chartData.data;
7661
- // metaData = this.chartData.metaData;
7662
- // lineData = this.chartData.lineData;
7663
- // // if (lineData || this.chartData.targetLineData) {
7664
- // // rightSvgWidth = 60;
7665
- // // }
7666
- // if (!metaData.colorAboveTarget) {
7667
- // metaData['colorAboveTarget'] = metaData.colors;
7668
- // }
7669
- // colorMap = metaData.colors;
7670
- // keyList = metaData.keyList;
7671
- // var chartContainer = d3.select(this.containerElt.nativeElement);
7672
- // var verticalstackedcontainer = d3.select(
7673
- // this.groupcontainerElt.nativeElement
7674
- // );
7675
- // var margin = this.chartConfiguration.margin;
7676
- // const { width, height } = this.calculateChartDimensions(
7677
- // chartContainer,
7678
- // verticalstackedcontainer,
7679
- // margin,
7680
- // self
7681
- // );
7682
- // /**
7683
- // * for hiding header
7684
- // * used by weekly charts
7685
- // */
7686
- // if (this.chartConfiguration.isHeaderVisible != undefined)
7687
- // this.isHeaderVisible = this.chartConfiguration.isHeaderVisible;
7688
- // /**
7689
- // * for hiding legends
7690
- // * used by weekly charts
7691
- // */
7692
- // if (this.chartConfiguration.legendVisible != undefined) {
7693
- // this.legendVisible = this.chartConfiguration.legendVisible;
7694
- // }
7695
- // /**
7696
- // * for removing background color so that it can take parents color
7697
- // *
7698
- // */
7699
- // if (this.chartConfiguration.isTransparentBackground != undefined) {
7700
- // this.isTransparentBackground =
7701
- // this.chartConfiguration.isTransparentBackground;
7702
- // }
7703
- // /**
7704
- // * format data values based on configuration received
7705
- // */
7706
- // if (this.chartConfiguration.textFormatter != undefined) {
7707
- // formatFromBackend = ChartHelper.dataValueFormatter(
7708
- // this.chartConfiguration.textFormatter
7709
- // );
7710
- // formatForHugeNumbers = ChartHelper.dataValueFormatter('.2s');
7711
- // }
7712
- // const {
7713
- // outerContainer,
7714
- // svgYAxisLeft,
7715
- // svgYAxisRight,
7716
- // innerContainer,
7717
- // svg
7718
- // } = this.createChartContainers(chartContainer, margin, height, rightSvgWidth, self, width);
7719
- // var subgroups: any = keyList;
7720
- // var groups = d3
7721
- // .map(data, function (d) {
7722
- // return d.name;
7723
- // })
7724
- // .keys();
7725
- // /**
7726
- // * x axis range made similar to line chart or vertical stack so that all the charts will get aligned with each other.
7727
- // */
7728
- // if (this.chartConfiguration.isMultiChartGridLine != undefined) {
7729
- // x = d3
7730
- // .scaleBand()
7731
- // .rangeRound([width, 0])
7732
- // .align(0.5)
7733
- // .padding([0.5])
7734
- // .domain(
7735
- // data.map(function (d: any) {
7736
- // return d.name.toLowerCase();
7737
- // })
7738
- // );
7739
- // } else {
7740
- // x = d3
7741
- // .scaleBand()
7742
- // .domain(groups)
7743
- // .range([leftAndRightSpaces, width - rightSvgWidth - leftAndRightSpaces])
7744
- // .padding([0.3]);
7745
- // }
7746
- // // x.bandwidth(96);
7747
- // var xScaleFromOrigin = d3
7748
- // .scaleBand()
7749
- // .domain(groups)
7750
- // .range([0, width - rightSvgWidth]);
7751
- // // .padding([0.2]);
7752
- // if (this.chartConfiguration.isMultiChartGridLine == undefined) {
7753
- // /**
7754
- // * normal ticks for all dashboard charts
7755
- // */
7756
- // svg
7757
- // .append('g')
7758
- // .attr('class', 'x1 axis1')
7759
- // .attr('transform', 'translate(0,' + height + ')')
7760
- // .call(d3.axisBottom(x))
7761
- // .call((g) => g.select('.domain').remove());
7762
- // svg.selectAll('g.x1.axis1 g.tick line').remove();
7763
- // // Only move x-axis labels further down for grouped charts if there is no xLabel
7764
- // if (subgroups.length > 1 && !metaData.xLabel) {
7765
- // svg
7766
- // .selectAll('g.x1.axis1 g.tick text')
7767
- // .attr('class', 'lib-xaxis-labels-texts-drilldown')
7768
- // .style('fill', 'var(--chart-text-color)')
7769
- // .attr('y', 32); // Increase distance from bars (default is ~9)
7770
- // } else {
7771
- // svg
7772
- // .selectAll('g.x1.axis1 g.tick text')
7773
- // .attr('class', 'lib-xaxis-labels-texts-drilldown')
7774
- // .style('fill', 'var(--chart-text-color)');
7775
- // }
7776
- // }
7777
- // else {
7778
- // /**
7779
- // * bigger ticks for weekly charts and more space from x axis to labels
7780
- // */
7781
- // /**
7782
- // * draw x axis
7783
- // */
7784
- // svg
7785
- // .append('g')
7786
- // .attr('class', 'x1 axis1')
7787
- // .attr('transform', 'translate(0,' + height + ')')
7788
- // .call(d3.axisBottom(x).tickSize(0))
7789
- // .call((g) => g.select('.domain').attr('fill', 'none'));
7790
- // /**
7791
- // * tick line size in alternate fashion
7792
- // */
7793
- // svg.selectAll('g.x1.axis1 g.tick line').attr('y2', function () {
7794
- // if (
7795
- // alternate_text &&
7796
- // self.chartConfiguration.isNoAlternateXaxisText == undefined
7797
- // ) {
7798
- // alternate_text = false;
7799
- // return long_tick_length_bg - 7;
7800
- // } else {
7801
- // alternate_text = true;
7802
- // return short_tick_length_bg - 4;
7803
- // }
7804
- // });
7805
- // /**
7806
- // * reset the flag so that values can be shown in same alternate fashion
7807
- // */
7808
- // alternate_text = false;
7809
- // /**
7810
- // * print x-axis label texts
7811
- // * used by weekly charts
7812
- // */
7813
- // svg
7814
- // .selectAll('g.x1.axis1 g.tick text')
7815
- // .attr('class', 'lib-xaxis-labels-texts-weeklycharts')
7816
- // .attr('y', function () {
7817
- // // Minimize gap in maximized (fullscreen) view for weekly charts
7818
- // if (self.chartConfiguration.isFullScreen) {
7819
- // return short_tick_length_bg;
7820
- // }
7821
- // if (alternate_text) {
7822
- // alternate_text = false;
7823
- // return long_tick_length_bg;
7824
- // } else {
7825
- // alternate_text = true;
7826
- // return short_tick_length_bg;
7827
- // }
7828
- // });
7829
- // }
7830
- // if (self.chartConfiguration.xLabelsOnSameLine) {
7831
- // const xAxisLabels = svg
7832
- // .selectAll('g.x1.axis1 g.tick text')
7833
- // .attr('class', 'lib-xaxis-labels-texts-drilldown')
7834
- // .style('font-size', this.isHeaderVisible ? '18px' : '14px')
7835
- // .attr('text-anchor', 'middle')
7836
- // .attr('y', function(d) {
7837
- // // For grouped bar charts with many bars and xLabel present, only add 5 if the label is a date
7838
- // if (subgroups.length > 1 && data.length > 8 && metaData.xLabel) {
7839
- // const isDateLabel = /\d{2,4}[-\/]/.test(d);
7840
- // if (self.chartConfiguration.isFullScreen) {
7841
- // return isDateLabel ? short_tick_length_bg + 14 : short_tick_length_bg;
7842
- // }
7843
- // return isDateLabel ? short_tick_length_bg + 14 : short_tick_length_bg;
7844
- // }
7845
- // // For grouped bar charts with many bars and NO xLabel, add space as before, but reduce in fullscreen
7846
- // if (subgroups.length > 1 && data.length > 8 && !metaData.xLabel) {
7847
- // const chartHasExtraBottom = (self.chartConfiguration.margin && self.chartConfiguration.margin.bottom >= 40);
7848
- // if (self.chartConfiguration.isFullScreen) {
7849
- // // Reduce extra gap in maximized view
7850
- // return short_tick_length_bg + 2;
7851
- // }
7852
- // return chartHasExtraBottom ? short_tick_length_bg : short_tick_length_bg + 10;
7853
- // }
7854
- // // Default/fallback logic for other cases
7855
- // let baseY = self.isHeaderVisible ? short_tick_length_bg + 25 : short_tick_length_bg;
7856
- // if (
7857
- // subgroups.length > 1 &&
7858
- // !metaData.xLabel &&
7859
- // (/\d{2,4}[-\/]\d{2}[-\/]\d{2,4}/.test(d) || /\d{2,4}[-\/]\d{2,4}/.test(d))
7860
- // ) {
7861
- // baseY = self.isHeaderVisible ? short_tick_length_bg + 15 : short_tick_length_bg + 25;
7862
- // }
7863
- // if (/\d{2,4}[-\/]\d{2,4}/.test(d) && d.indexOf(' ') > -1) {
7864
- // baseY += 4;
7865
- // }
7866
- // // In maximized view, reduce baseY slightly for grouped bars
7867
- // if (self.chartConfiguration.isFullScreen && subgroups.length > 1) {
7868
- // baseY = Math.max(short_tick_length_bg, baseY - 10);
7869
- // }
7870
- // return baseY;
7871
- // })
7872
- // .attr('x', function (d) {
7873
- // if (self.chartData.data.length > 8 && !self.isZoomedOut) {
7874
- // return 1; // Move first line text slightly to the left in zoom-in view for better alignment
7875
- // }
7876
- // return 0; // Default position
7877
- // })
7878
- // .text(function (d) {
7879
- // var isValueToBeIgnored = false;
7880
- // if (isMobile && !self.isHeaderVisible) {
7881
- // let firstPart = d.split(/[\s\-]+/)[0];
7882
- // return firstPart.substring(0, 3).toLowerCase();
7883
- // }
7884
- // (data as any[]).map((indiv: any) => {
7885
- // if (
7886
- // indiv.name &&
7887
- // indiv.name.toLowerCase() == d.trim().toLowerCase() &&
7888
- // indiv[metaData.keyList[0]] == -1
7889
- // ) {
7890
- // isValueToBeIgnored = true;
7891
- // }
7892
- // });
7893
- // if (isValueToBeIgnored) {
7894
- // return '';
7895
- // }
7896
- // // Always add space before and after hyphen for date range labels, even when header is visible and label is single line
7897
- // // Apply for grouped bar charts and single bar charts, header visible, single line
7898
- // const dateRangeRegex = /(\d{2,4}[-\/]\d{2}[-\/]\d{2,4})\s*-\s*(\d{2,4}[-\/]\d{2}[-\/]\d{2,4})/;
7899
- // if (dateRangeRegex.test(d.trim())) {
7900
- // return d.trim().replace(dateRangeRegex, (m, d1, d2) => `${d1} - ${d2}`);
7901
- // }
7902
- // // Split date and week labels into two lines in grouped bar zoom-in view (and minimized view)
7903
- // const isDateLabel = /\d{2,4}[-\/]/.test(d);
7904
- // const isWeekLabel = /week|wk|w\d+/i.test(d);
7905
- // if (
7906
- // subgroups.length > 1 && !self.isZoomedOut && data.length > 8 && d.indexOf(' ') > -1 && (isDateLabel || isWeekLabel)
7907
- // ) {
7908
- // var first = d.substring(0, d.indexOf(' '));
7909
- // var second = d.substring(d.indexOf(' ') + 1).trim();
7910
- // return first + '\n' + second;
7911
- // }
7912
- // // Also keep previous logic for minimized view
7913
- // if (isDateLabel) {
7914
- // if (!self.isHeaderVisible && data.length > 8 && d.indexOf(' ') > -1) {
7915
- // var first = d.substring(0, d.indexOf(' '));
7916
- // var second = d.substring(d.indexOf(' ') + 1).trim();
7917
- // return first + '\n' + second;
7918
- // } else {
7919
- // return d;
7920
- // }
7921
- // }
7922
- // if (d.trim().indexOf(' ') > -1) {
7923
- // return d.trim().substring(0, d.indexOf(' ')).toLowerCase();
7924
- // }
7925
- // return d.toLowerCase();
7926
- // // If label looks like a date (contains digits and - or /)
7927
- // const isDateLabel2 = /\d{2,4}[-\/]/.test(d);
7928
- // // Only split date/week labels if there are many grouped bars and header is not visible
7929
- // if (isDateLabel) {
7930
- // if (!self.isHeaderVisible && data.length > 8 && d.indexOf(' ') > -1) {
7931
- // var first = d.substring(0, d.indexOf(' '));
7932
- // var second = d.substring(d.indexOf(' ') + 1).trim();
7933
- // return first + '\n' + second;
7934
- // } else {
7935
- // return d;
7936
- // }
7937
- // }
7938
- // if (d.trim().indexOf(' ') > -1) {
7939
- // return d.trim().substring(0, d.indexOf(' ')).toLowerCase();
7940
- // }
7941
- // return d.toLowerCase();
7942
- // });
7943
- // // Now apply writing-mode: sideways-lr for grouped charts with date labels in zoomed-out view and many bars
7944
- // xAxisLabels.each(function(this: SVGTextElement, d: any) {
7945
- // // Only apply writing-mode for exact date labels, not those containing 'week' or similar
7946
- // const isDateLabel = /^(\d{2,4}[-\/])?\d{2,4}[-\/]\d{2,4}$/.test(d.trim());
7947
- // const isWeekLabel = /week|wk|w\d+/i.test(d);
7948
- // if (subgroups.length > 1 && self.isZoomedOut && data.length > 8 && isDateLabel && !isWeekLabel) {
7949
- // d3.select(this).style('writing-mode', 'sideways-lr');
7950
- // }
7951
- // });
7952
- // if (!isMobile) {
7953
- // svg
7954
- // .selectAll('g.x1.axis1 g.tick')
7955
- // .filter(function (d) {
7956
- // return !/\d{2,4}[-\/]/.test(d); // Only process non-date labels
7957
- // })
7958
- // .append('text')
7959
- // .attr('class', 'lib-xaxis-labels-texts-drilldown')
7960
- // .attr('y', long_tick_length_bg)
7961
- // .attr('fill', 'var(--chart-text-color)')
7962
- // .attr('x', function (d) {
7963
- // if (self.chartData.data.length > 8 && !self.isZoomedOut) {
7964
- // return 1; // Move text slightly to the left
7965
- // }
7966
- // return 0; // Default position
7967
- // })
7968
- // .text(function (d) {
7969
- // if (d.trim().indexOf(' ') > -1) {
7970
- // return d.trim().substring(d.indexOf(' '), d.length).toLowerCase();
7971
- // }
7972
- // return '';
7973
- // });
7974
- // }
7975
- // }
7976
- // if (isria && self.chartData.data.length > 8) {
7977
- // svg
7978
- // .selectAll('g.x1.axis1 g.tick text')
7979
- // .classed('mobile-xaxis-override', true)
7980
- // .text(function (d: string) {
7981
- // return d.substring(0, 3);
7982
- // })
7983
- // .style('font-size', '12px')
7984
- // .attr('y', 5)
7985
- // .attr('x', 5)
7986
- // .style('text-anchor', 'middle');
7987
- // }
7988
- // if (isMobile && !this.isHeaderVisible) {
7989
- // svg
7990
- // .selectAll('g.x1.axis1 g.tick text')
7991
- // .classed('mobile-xaxis-override', true);
7992
- // }
7993
- // /**y scale for left y axis */
7994
- // var y = d3.scaleLinear().rangeRound([height, 0]);
7995
- // var maxValue = d3.max(data, (d) => d3.max(keyList, (key) => +d[key]));
7996
- // if (maxValue == 0) {
7997
- // if (this.chartData.targetLineData) {
7998
- // maxValue = this.chartData.targetLineData.target + 20;
7999
- // } else {
8000
- // maxValue = 100;
8001
- // }
8002
- // }
8003
- // if (this.chartConfiguration.customYscale) {
8004
- // /**
8005
- // * increase y-scale so that values wont cross or exceed out of range
8006
- // * used in weekly charts
8007
- // */
8008
- // maxValue = maxValue * this.chartConfiguration.customYscale;
8009
- // }
8010
- // if (
8011
- // this.chartData.targetLineData &&
8012
- // maxValue < this.chartData.targetLineData.target
8013
- // ) {
8014
- // maxValue =
8015
- // maxValue < 10 && this.chartData.targetLineData.target < 10
8016
- // ? this.chartData.targetLineData.target + 3
8017
- // : this.chartData.targetLineData.target + 20;
8018
- // }
8019
- // y.domain([0, maxValue]).nice();
8020
- // let lineYscale;
8021
- // if (lineData != null) {
8022
- // let maxLineValue = d3.max(lineData, function (d) {
8023
- // return +d.value;
8024
- // });
8025
- // maxLineValue = maxLineValue * this.chartConfiguration.customYscale;
8026
- // let minLineValue = d3.min(lineData, function (d) {
8027
- // return +d.value;
8028
- // });
8029
- // if (maxLineValue > 0) minLineValue = minLineValue - 3;
8030
- // if (minLineValue > 0) {
8031
- // minLineValue = 0;
8032
- // }
8033
- // lineYscale = d3
8034
- // .scaleLinear()
8035
- // .domain([minLineValue, maxLineValue])
8036
- // .range([height, minLineValue]);
8037
- // }
8038
- // let yLineAxis;
8039
- // if (lineYscale != null) {
8040
- // yLineAxis = d3
8041
- // .axisRight(lineYscale)
8042
- // .ticks(self.chartConfiguration.numberOfYTicks)
8043
- // .tickSize(0)
8044
- // .tickFormat(self.chartConfiguration.yLineAxisLabelFomatter);
8045
- // }
8046
- // /**
8047
- // * show x-axis grid between labels
8048
- // * used by weekly charts
8049
- // */
8050
- // if (self.chartConfiguration.isXgridBetweenLabels) {
8051
- // svg
8052
- // .append('g')
8053
- // .attr('class', 'grid')
8054
- // .attr(
8055
- // 'transform',
8056
- // 'translate(' + x.bandwidth() / 2 + ',' + height + ')'
8057
- // )
8058
- // .call(d3.axisBottom(x).tickSize(-height).tickFormat(''))
8059
- // .style('stroke-dasharray', '5 5')
8060
- // .style('color', 'var(--chart-grid-color, #999999)') // Use CSS variable
8061
- // .call((g) => g.select('.domain').remove());
8062
- // }
8063
- // if (this.chartConfiguration.yAxisGrid) {
8064
- // svg
8065
- // .append('g')
8066
- // .call(
8067
- // d3
8068
- // .axisLeft(y)
8069
- // .ticks(self.chartConfiguration.numberOfYTicks)
8070
- // .tickSize(-width)
8071
- // )
8072
- // .style('color', 'var(--chart-axis-color, #B9B9B9)')
8073
- // .style('opacity', '0.5')
8074
- // .call((g) => {
8075
- // g.select('.domain')
8076
- // .remove()
8077
- // .style('stroke', 'var(--chart-domain-color, #000000)'); // Add CSS variable for domain
8078
- // });
8079
- // } else {
8080
- // svg
8081
- // .append('g')
8082
- // .call(d3.axisLeft(y).ticks(self.chartConfiguration.numberOfYTicks))
8083
- // .style('color', 'var(--chart-axis-color, #B9B9B9)')
8084
- // .style('opacity', '0.5')
8085
- // .call((g) => {
8086
- // g.select('.domain')
8087
- // .style('stroke', 'var(--chart-domain-color, #000000)') // Add CSS variable for domain
8088
- // .style('stroke-width', '1px'); // Ensure visibility
8089
- // });
8090
- // }
8091
- // var xSubgroup = d3.scaleBand().domain(subgroups);
8092
- // if (subgroups.length > 1 && !this.isZoomedOut) {
8093
- // // For grouped bar charts in zoom-in view, use full x.bandwidth() for subgroups
8094
- // xSubgroup.range([0, x.bandwidth()]);
8095
- // } else if (subgroups.length === 1 && !this.isZoomedOut) {
8096
- // // For single-bar (non-grouped) charts in zoom-in view, set bar width to 100 (increased from 80)
8097
- // xSubgroup.range([0, 100]);
8098
- // } else if (this.chartConfiguration.isMultiChartGridLine == undefined) {
8099
- // xSubgroup.range([0, x.bandwidth()]);
8100
- // } else {
8101
- // // used to make grouped bars with lesser width as we are not using padding for width
8102
- // xSubgroup.range([0, x.bandwidth()]);
8103
- // }
8104
- // // if (this.chartConfiguration.isDrilldownChart) {
8105
- // // }
8106
- // var color = d3
8107
- // .scaleOrdinal()
8108
- // .domain(subgroups)
8109
- // .range(Object.values(metaData.colors));
8110
- // // var colorAboveTarget = d3
8111
- // // .scaleOrdinal()
8112
- // // .domain(subgroups)
8113
- // // .range(Object.values(metaData.colorAboveTarget));
8114
- // var state = svg
8115
- // .append('g')
8116
- // .selectAll('.state')
8117
- // .data(data)
8118
- // .enter()
8119
- // .append('g')
8120
- // .attr('transform', function (d) {
8121
- // return 'translate(' + x(d.name) + ',0)';
8122
- // });
8123
- // state
8124
- // .selectAll('rect')
8125
- // .data(function (d) {
8126
- // let newList: any = [];
8127
- // subgroups.map(function (key) {
8128
- // // if (key !== "group") {
8129
- // let obj: any = { key: key, value: d[key], name: d.name };
8130
- // newList.push(obj);
8131
- // // }
8132
- // });
8133
- // return newList;
8134
- // })
8135
- // .enter()
8136
- // .append('rect')
8137
- // .attr('class', 'bars')
8138
- // .on('click', function (d) {
8139
- // if (d.key != 'Target') {
8140
- // if (
8141
- // !metaData.barWithoutClick ||
8142
- // !metaData.barWithoutClick.length ||
8143
- // (!metaData.barWithoutClick.includes(d?.name) &&
8144
- // !metaData.barWithoutClick.includes(d?.key))
8145
- // )
8146
- // // self.handleClick(d.data.name);
8147
- // self.handleClick(d);
8148
- // }
8149
- // })
8150
- // .attr('x', function (d) {
8151
- // if (self.chartConfiguration.isDrilldownChart) {
8152
- // data.map((indiv: any) => {
8153
- // if (indiv.name == d.name) {
8154
- // let keys = Object.keys(indiv).filter((temp, i) => i != 0);
8155
- // tempScale = d3.scaleBand().domain(keys).range([0, x.bandwidth()]);
8156
- // if (x.bandwidth() > 100) {
8157
- // // Increase bar width a bit in zoom-in view
8158
- // let reducedBarWidth = 60;
8159
- // if (!self.isZoomedOut) {
8160
- // reducedBarWidth = 30;
8161
- // }
8162
- // if (self.chartData.data.length == 1) {
8163
- // if (Object.keys(self.chartData.data[0]).length == 2) {
8164
- // tempScale.range([
8165
- // 0 + (x.bandwidth() - reducedBarWidth) / 2,
8166
- // x.bandwidth() - (x.bandwidth() - reducedBarWidth) / 2,
8167
- // ]);
8168
- // } else
8169
- // tempScale.range([
8170
- // 0 + (x.bandwidth() - reducedBarWidth) / 2,
8171
- // x.bandwidth() - (x.bandwidth() - reducedBarWidth) / 2,
8172
- // ]);
8173
- // } else
8174
- // tempScale.range([
8175
- // 0 + (x.bandwidth() - reducedBarWidth) / 2,
8176
- // x.bandwidth() - (x.bandwidth() - reducedBarWidth) / 2,
8177
- // ]);
8178
- // }
8179
- // }
8180
- // });
8181
- // return tempScale(d.key);
8182
- // }
8183
- // return xSubgroup(d.key);
8184
- // })
8185
- // .attr('y', function (d) {
8186
- // if (d.value == -1) {
8187
- // return y(0);
8188
- // }
8189
- // if (d.value >= 0) {
8190
- // const barHeight = height - y(d.value);
8191
- // const minHeight = self.chartConfiguration.defaultBarHeight || 2;
8192
- // return barHeight < minHeight ? y(0) - minHeight : y(d.value);
8193
- // }
8194
- // return y(0);
8195
- // })
8196
- // .attr('width', function (d) {
8197
- // // For grouped bar charts in zoom-in view, set bar width to 50 for maximum thickness
8198
- // if (subgroups.length > 1 && !self.isZoomedOut) {
8199
- // return 50;
8200
- // }
8201
- // // For single-bar (non-grouped) charts in zoom-in view, set bar width to 80
8202
- // if (subgroups.length === 1 && !self.isZoomedOut) {
8203
- // return 80;
8204
- // }
8205
- // let tempScale = d3.scaleBand().domain([]).range([0, 0]);
8206
- // // Default logic for other chart types
8207
- // if (self.chartConfiguration.isDrilldownChart) {
8208
- // data.map((indiv: any) => {
8209
- // if (indiv.name == d.name) {
8210
- // let keys = Object.keys(indiv).filter((temp, i) => i != 0);
8211
- // tempScale = d3.scaleBand().domain(keys).range([0, x.bandwidth()]);
8212
- // if (x.bandwidth() > 100) {
8213
- // // Increase bar width a bit in zoom-in view
8214
- // let reducedBarWidth = 60;
8215
- // if (!self.isZoomedOut) {
8216
- // reducedBarWidth = 100;
8217
- // }
8218
- // if (self.chartData.data.length == 1) {
8219
- // if (Object.keys(self.chartData.data[0]).length == 2) {
8220
- // tempScale.range([
8221
- // 0 + (x.bandwidth() - reducedBarWidth) / 2,
8222
- // x.bandwidth() - (x.bandwidth() - reducedBarWidth) / 2,
8223
- // ]);
8224
- // } else
8225
- // tempScale.range([
8226
- // 0 + (x.bandwidth() - reducedBarWidth) / 2,
8227
- // x.bandwidth() - (x.bandwidth() - reducedBarWidth) / 2,
8228
- // ]);
8229
- // } else
8230
- // tempScale.range([
8231
- // 0 + (x.bandwidth() - reducedBarWidth) / 2,
8232
- // x.bandwidth() - (x.bandwidth() - reducedBarWidth) / 2,
8233
- // ]);
8234
- // }
8235
- // }
8236
- // });
8237
- // return self.isZoomedOut
8238
- // ? tempScale.bandwidth()
8239
- // : self.chartData.data.length && self.chartData.data.length > 8
8240
- // ? tempScale.bandwidth()
8241
- // : tempScale.bandwidth();
8242
- // }
8243
- // return self.isZoomedOut
8244
- // ? tempScale.bandwidth()
8245
- // : self.chartData.data.length && self.chartData.data.length > 8
8246
- // ? tempScale.bandwidth()
8247
- // : tempScale.bandwidth();
8248
- // })
8249
- // .attr('height', function (d) {
8250
- // if (d.value == -1) {
8251
- // return height - y(0);
8252
- // }
8253
- // if (d.value >= 0) {
8254
- // const barHeight = height - y(d.value);
8255
- // const minHeight = self.chartConfiguration.defaultBarHeight || 2;
8256
- // return Math.max(barHeight, minHeight);
8257
- // }
8258
- // return height - y(0);
8259
- // })
8260
- // .style('cursor', function (d) {
8261
- // if (metaData.hasDrillDown && !isria) return 'pointer';
8262
- // else return 'default';
8263
- // })
8264
- // .attr('fill', function (d) {
8265
- // if (
8266
- // d.value &&
8267
- // self.chartData.targetLineData &&
8268
- // d.value >= parseFloat(self.chartData.targetLineData.target) &&
8269
- // self.chartData.metaData.colorAboveTarget
8270
- // ) {
8271
- // const key = d.key.toLowerCase();
8272
- // const colorAboveTarget = Object.keys(self.chartData.metaData.colorAboveTarget).find(
8273
- // k => k.toLowerCase() === key
8274
- // );
8275
- // if (colorAboveTarget) {
8276
- // return self.chartData.metaData.colorAboveTarget[colorAboveTarget];
8277
- // }
8278
- // }
8279
- // return self.chartData.metaData.colors[d.key];
8280
- // });
8281
- // /**
8282
- // * display angled texts on the bars
8283
- // */
8284
- // if (this.chartConfiguration.textsOnBar != undefined && !this.isZoomedOut) {
8285
- // state
8286
- // .selectAll('text')
8287
- // .data(function (d) {
8288
- // let newList: any = [];
8289
- // subgroups.map(function (key) {
8290
- // let obj: any = { key: key, value: d[key], name: d.name };
8291
- // newList.push(obj);
8292
- // });
8293
- // return newList;
8294
- // })
8295
- // .enter()
8296
- // .append('text')
8297
- // .attr('fill', 'var(--chart-text-color)')
8298
- // .attr('x', function (d) {
8299
- // return 0;
8300
- // })
8301
- // .attr('y', function (d) {
8302
- // return 0;
8303
- // })
8304
- // .attr('class', 'lib-data-labels-weeklycharts')
8305
- // .text(function (d) {
8306
- // return d.key && d.value
8307
- // ? d.key.length > 20
8308
- // ? d.key.substring(0, 17) + '...'
8309
- // : d.key
8310
- // : '';
8311
- // })
8312
- // .style('fill', function (d) {
8313
- // return '#000';
8314
- // })
8315
- // .style('font-weight', 'bold')
8316
- // .style('font-size', function (d) {
8317
- // if (self.isZoomedOut) {
8318
- // return '9px'; // 👈 Zoomed out mode
8319
- // }
8320
- // if (self.chartConfiguration.isDrilldownChart) {
8321
- // if (window.innerWidth > 1900) {
8322
- // return '18px';
8323
- // } else if (window.innerWidth < 1400) {
8324
- // return '10px';
8325
- // } else {
8326
- // return '14px';
8327
- // }
8328
- // } else {
8329
- // return '14px';
8330
- // }
8331
- // })
8332
- // .attr('transform', function (d) {
8333
- // data.map((indiv: any) => {
8334
- // if (indiv.name == d.name) {
8335
- // let keys = Object.keys(indiv).filter((temp, i) => i != 0);
8336
- // var temp;
8337
- // tempScale = d3.scaleBand().domain(keys).range([0, x.bandwidth()]);
8338
- // if (x.bandwidth() > 100) {
8339
- // if (self.chartData.data.length == 1) {
8340
- // if (Object.keys(self.chartData.data[0]).length == 2) {
8341
- // tempScale.range([
8342
- // 0 + (x.bandwidth() - 200) / 2,
8343
- // x.bandwidth() - (x.bandwidth() - 200) / 2,
8344
- // ]);
8345
- // // .padding(0.05);
8346
- // } else
8347
- // tempScale.range([
8348
- // 0 + (x.bandwidth() - 300) / 2,
8349
- // x.bandwidth() - (x.bandwidth() - 300) / 2,
8350
- // ]);
8351
- // // .padding(0.05);
8352
- // } else
8353
- // tempScale.range([
8354
- // 0 + (x.bandwidth() - 125) / 2,
8355
- // x.bandwidth() - (x.bandwidth() - 125) / 2,
8356
- // ]);
8357
- // }
8358
- // }
8359
- // });
8360
- // /**
8361
- // * if set, then all texts ll be horizontal
8362
- // */
8363
- // if (self.chartConfiguration.textAlwaysHorizontal) {
8364
- // return (
8365
- // 'translate(' + xSubgroup(d.key) + ',' + (y(d.value) - 3) + ')'
8366
- // );
8367
- // }
8368
- // /**
8369
- // * rotate texts having more than one digits
8370
- // */
8371
- // // if (d.value > 9)
8372
- // if (!isNaN(tempScale(d.key)))
8373
- // return (
8374
- // 'translate(' +
8375
- // (tempScale(d.key) + tempScale.bandwidth() * 0.55) +
8376
- // ',' +
8377
- // (y(0) - 10) +
8378
- // ') rotate(270)'
8379
- // );
8380
- // return 'translate(0,0)';
8381
- // // else
8382
- // // return (
8383
- // // 'translate(' +
8384
- // // (tempScale(d.key) + tempScale.bandwidth() / 2) +
8385
- // // ',' +
8386
- // // y(0) +
8387
- // // ')'
8388
- // // );
8389
- // })
8390
- // .on('click', function (d) {
8391
- // if (
8392
- // !metaData.barWithoutClick ||
8393
- // !metaData.barWithoutClick.length ||
8394
- // (!metaData.barWithoutClick.includes(d?.name) &&
8395
- // !metaData.barWithoutClick.includes(d?.key))
8396
- // )
8397
- // self.handleClick(d);
8398
- // });
8399
- // if (!isria) {
8400
- // state
8401
- // .selectAll('.lib-data-labels-weeklycharts')
8402
- // .on('mouseout', handleMouseOut)
8403
- // .on('mouseover', handleMouseOver);
8404
- // }
8405
- // }
8406
- // if (this.chartConfiguration.displayTitleOnTop || (
8407
- // this.chartConfiguration.textsOnBar == undefined &&
8408
- // this.chartConfiguration.displayTitleOnTop == undefined
8409
- // )) {
8410
- // if (!isria) {
8411
- // state
8412
- // .selectAll('rect')
8413
- // .on('mouseout', handleMouseOut)
8414
- // .on('mouseover', handleMouseOver);
8415
- // }
8416
- // }
8417
- // function handleMouseOver(d, i) {
8418
- // svg.selectAll('.lib-verticalstack-title-ontop').remove();
8419
- // svg
8420
- // .append('foreignObject')
8421
- // .attr('x', function () {
8422
- // // ...existing code for tempScale calculation...
8423
- // var elementsCounter;
8424
- // data.map((indiv: any) => {
8425
- // if (indiv.name == d.name) {
8426
- // let keys = Object.keys(indiv).filter((temp, i) => i != 0);
8427
- // elementsCounter = keys.length;
8428
- // tempScale = d3.scaleBand().domain(keys).range([0, x.bandwidth()]);
8429
- // if (x.bandwidth() > 100) {
8430
- // if (self.chartData.data.length == 1) {
8431
- // if (Object.keys(self.chartData.data[0]).length == 2) {
8432
- // tempScale.range([
8433
- // 0 + (x.bandwidth() - 200) / 2,
8434
- // x.bandwidth() - (x.bandwidth() - 200) / 2,
8435
- // ]);
8436
- // } else
8437
- // tempScale.range([
8438
- // 0 + (x.bandwidth() - 300) / 2,
8439
- // x.bandwidth() - (x.bandwidth() - 300) / 2,
8440
- // ]);
8441
- // } else
8442
- // tempScale.range([
8443
- // 0 + (x.bandwidth() - 125) / 2,
8444
- // x.bandwidth() - (x.bandwidth() - 125) / 2,
8445
- // ]);
8446
- // }
8447
- // }
8448
- // });
8449
- // if (metaData.hasDrillDown) {
8450
- // if (tempScale.bandwidth() + leftAndRightSpaces * 2 > 180) {
8451
- // return (
8452
- // x(d.name) + tempScale(d.key) + tempScale.bandwidth() / 2 - 90
8453
- // );
8454
- // }
8455
- // return (
8456
- // x(d.name) +
8457
- // tempScale(d.key) -
8458
- // (tempScale.bandwidth() + leftAndRightSpaces * 2) / 2 +
8459
- // tempScale.bandwidth() / 2
8460
- // );
8461
- // } else return x(d.name) + tempScale(d.key) - (tempScale.bandwidth() + leftAndRightSpaces * 2) / 2 + tempScale.bandwidth() / 2;
8462
- // })
8463
- // .attr('class', 'lib-verticalstack-title-ontop')
8464
- // .attr('y', function () {
8465
- // return y(d.value) - 3 - 40 - 10;
8466
- // })
8467
- // .attr('dy', function () {
8468
- // return d.class;
8469
- // })
8470
- // .attr('width', function () {
8471
- // data.map((indiv: any) => {
8472
- // if (indiv.name == d.name) {
8473
- // let keys = Object.keys(indiv).filter((temp, i) => i != 0);
8474
- // tempScale = d3.scaleBand().domain(keys).range([0, x.bandwidth()]);
8475
- // if (x.bandwidth() > 100) {
8476
- // if (self.chartData.data.length == 1) {
8477
- // if (Object.keys(self.chartData.data[0]).length == 2) {
8478
- // tempScale.range([
8479
- // 0 + (x.bandwidth() - 200) / 2,
8480
- // x.bandwidth() - (x.bandwidth() - 200) / 2,
8481
- // ]);
8482
- // } else
8483
- // tempScale.range([
8484
- // 0 + (x.bandwidth() - 300) / 2,
8485
- // x.bandwidth() - (x.bandwidth() - 300) / 2,
8486
- // ]);
8487
- // } else
8488
- // tempScale.range([
8489
- // 0 + (x.bandwidth() - 125) / 2,
8490
- // x.bandwidth() - (x.bandwidth() - 125) / 2,
8491
- // ]);
8492
- // }
8493
- // }
8494
- // });
8495
- // if (metaData.hasDrillDown) {
8496
- // if (tempScale.bandwidth() + leftAndRightSpaces * 2 > 180) {
8497
- // return '180px';
8498
- // }
8499
- // return tempScale.bandwidth() + leftAndRightSpaces * 2;
8500
- // } else return tempScale.bandwidth() + leftAndRightSpaces * 2;
8501
- // })
8502
- // .attr('height', 50)
8503
- // .append('xhtml:div')
8504
- // .attr('class', 'title')
8505
- // .style('z-index', 99)
8506
- // .html(function () {
8507
- // let barLabel = d.key;
8508
- // let dataType = metaData.dataType ? metaData.dataType : '';
8509
- // let value = d.value;
8510
- // let desiredText =
8511
- // '<span class="title-bar-name">' + barLabel + '</span>';
8512
- // desiredText +=
8513
- // '<span class="title-bar-value"><span>' +
8514
- // value +
8515
- // '</span>' +
8516
- // dataType +
8517
- // '</span>';
8518
- // return desiredText;
8519
- // });
8520
- // }
8521
- // function handleMouseOut(d, i) {
8522
- // svg.selectAll('.lib-verticalstack-title-ontop').remove();
8523
- // }
8524
- // svg
8525
- // .append('g')
8526
- // .attr('class', 'x2 axis2')
8527
- // .attr('transform', 'translate(0,' + height + ')')
8528
- // .style('color', 'var(--chart-axis-color, #000)') // Use CSS variable instead of hardcoded #000
8529
- // .call(d3.axisBottom(xScaleFromOrigin).tickSize(0))
8530
- // .call((g) => g.select('.domain').attr('fill', 'none'));
8531
- // svg.selectAll('g.x2.axis2 g.tick text').style('display', 'none');
8532
- // svg
8533
- // .append('g')
8534
- // .attr('class', 'lib-stacked-y-axis-text yaxis-dashed')
8535
- // .attr('style', self.chartConfiguration.yAxisCustomTextStyles)
8536
- // .attr('transform', 'translate(0,0)')
8537
- // .call(y)
8538
- // .style('display', 'none');
8539
- // svgYAxisLeft
8540
- // .append('g')
8541
- // .append('g')
8542
- // .attr('class', 'lib-yaxis-labels-texts-drilldown yaxis-dashed')
8543
- // .attr('style', self.chartConfiguration.yAxisCustomTextStyles)
8544
- // .attr('transform', 'translate(0,0)')
8545
- // .call(
8546
- // d3
8547
- // .axisLeft(y)
8548
- // .tickSize(0)
8549
- // .ticks(self.chartConfiguration.numberOfYTicks)
8550
- // .tickFormat(function (d) {
8551
- // const formatted = self.chartConfiguration.yAxisLabelFomatter
8552
- // ? self.chartConfiguration.yAxisLabelFomatter(d)
8553
- // : d;
8554
- // return formatted >= 1000 ? formatted / 1000 + 'k' : formatted;
8555
- // })
8556
- // )
8557
- // .call((g) => {
8558
- // // Style the domain line for theme support
8559
- // g.select('.domain')
8560
- // .style('stroke', 'var(--chart-domain-color, #000000)')
8561
- // .style('stroke-width', '1px');
8562
- // })
8563
- // .selectAll('text')
8564
- // .style('fill', 'var(--chart-text-color)');
8565
- // svgYAxisRight
8566
- // .append('g')
8567
- // .attr('class', 'lib-yaxis-labels-texts-drilldown yaxis-dashed')
8568
- // .attr('style', self.chartConfiguration.yAxisCustomTextStyles)
8569
- // .attr('transform', 'translate(0,0)')
8570
- // .call(y)
8571
- // .style('display', 'none');
8572
- // /**
8573
- // * hide x axis labels
8574
- // * config is there for future use
8575
- // * used by weekly charts
8576
- // */
8577
- // if (
8578
- // this.chartConfiguration.isXaxisLabelHidden != undefined &&
8579
- // this.chartConfiguration.isXaxisLabelHidden
8580
- // ) {
8581
- // d3.selectAll('g.lib-line-x-axis-text > g > text').attr(
8582
- // 'class',
8583
- // 'lib-display-hidden'
8584
- // );
8585
- // }
8586
- // /**
8587
- // * hide y axis labels
8588
- // * used by weekly charts
8589
- // */
8590
- // if (
8591
- // this.chartConfiguration.isYaxisLabelHidden != undefined &&
8592
- // this.chartConfiguration.isYaxisLabelHidden
8593
- // ) {
8594
- // d3.selectAll('.yaxis-dashed > g > text').attr(
8595
- // 'class',
8596
- // 'lib-display-hidden'
8597
- // );
8598
- // }
8599
- // /**
8600
- // * hide y axis labels
8601
- // * config is there for future use
8602
- // */
8603
- // if (
8604
- // this.chartConfiguration.isYaxisHidden != undefined &&
8605
- // this.chartConfiguration.isYaxisHidden
8606
- // ) {
8607
- // d3.selectAll('.yaxis-dashed').attr('class', 'lib-display-hidden');
8608
- // }
8609
- // /**
8610
- // * dashed y axis
8611
- // * used by weekly charts
8612
- // */
8613
- // if (
8614
- // this.chartConfiguration.isYaxisDashed != undefined &&
8615
- // this.chartConfiguration.isYaxisDashed
8616
- // ) {
8617
- // d3.selectAll('.yaxis-dashed')
8618
- // .style('stroke-dasharray', '5 5')
8619
- // .style('color', 'var(--chart-axis-color, #999999)'); // Use CSS variable
8620
- // }
8621
- // if (lineData != null) {
8622
- // if (lineData && self.chartConfiguration.showLineChartAxis) {
8623
- // svgYAxisRight
8624
- // .append('g')
8625
- // .attr('class', 'lib-stacked-y-axis-text1')
8626
- // .attr('style', self.chartConfiguration.yAxisCustomTextStyles)
8627
- // .attr('transform', 'translate(' + 0 + ',0)')
8628
- // .call(yLineAxis);
8629
- // }
8630
- // }
8631
- // /**
8632
- // * used to display y label
8633
- // */
8634
- // // if (this.isZoomedOut) {
8635
- // // svg
8636
- // // .selectAll('.lib-xaxis-labels-texts-drilldown')
8637
- // // .attr('class', 'lib-display-hidden');
8638
- // // }
8639
- // if (this.isZoomedOut) {
8640
- // svg
8641
- // .selectAll('.lib-xaxis-labels-texts-drilldown')
8642
- // .each((d, i, nodes) => {
8643
- // const text = d3.select(nodes[i]);
8644
- // const label = text.text();
8645
- // if (label.indexOf('\n') > -1) {
8646
- // const lines = label.split('\n');
8647
- // text.text(null);
8648
- // lines.forEach((line, idx) => {
8649
- // text.append('tspan')
8650
- // .text(line)
8651
- // .attr('x', 0)
8652
- // .attr('dy', idx === 0 ? '1em' : '1.1em');
8653
- // });
8654
- // } else {
8655
- // const words = label.split(' ');
8656
- // text.text(null);
8657
- // words.forEach((word, index) => {
8658
- // text.append('tspan').text(word);
8659
- // });
8660
- // }
8661
- // })
8662
- // .style('fill', 'var(--chart-text-color)')
8663
- // .attr('transform', null);
8664
- // svg
8665
- // .select('.x-axis')
8666
- // .attr('transform', `translate(0, ${height - margin.bottom + 10})`);
8667
- // }
8668
- // /**
8669
- // * used to write y labels based on configuration
8670
- // */
8671
- // if (metaData.yLabel) {
8672
- // const yPosition = isria ? 0 - margin.left / 2 - 30 : 0 - margin.left / 2 - 40;
8673
- // svgYAxisLeft
8674
- // .append('text')
8675
- // .attr('class', 'lib-axis-group-label font-size-1')
8676
- // .attr('style', self.chartConfiguration.yAxisCustomlabelStyles)
8677
- // .attr('transform', 'rotate(-90)')
8678
- // .attr('y', yPosition)
8679
- // .attr('x', 0 - height / 2)
8680
- // .attr('dy', '1em')
8681
- // .style('text-anchor', 'middle')
8682
- // .attr('fill', 'var(--chart-text-color)');
8683
- // if (this.chartConfiguration.isMultiChartGridLine === undefined) {
8684
- // svgYAxisLeft
8685
- // .selectAll('.lib-axis-group-label')
8686
- // .style('font-size', 'smaller')
8687
- // .text(metaData.yLabel);
8688
- // } else {
8689
- // svg
8690
- // .selectAll('.lib-axis-group-label')
8691
- // .attr('class', 'lib-ylabel-weeklyCharts')
8692
- // .text(metaData.yLabel.toLowerCase());
8693
- // }
8694
- // }
8695
- // if (this.chartData.targetLineData) {
8696
- // const yZero = y(this.chartData.targetLineData.target);
8697
- // svg
8698
- // .append('line')
8699
- // .attr('x1', 0)
8700
- // .attr('x2', width)
8701
- // .attr('y1', yZero)
8702
- // .attr('y2', yZero)
8703
- // .style('stroke-dasharray', '5 5')
8704
- // .style('stroke', this.chartData.targetLineData.color);
8705
- // // svgYAxisRight
8706
- // // .append('line')
8707
- // // .attr('x1', 0)
8708
- // // .attr('x2', rightSvgWidth)
8709
- // // .attr('y1', yZero)
8710
- // // .attr('y2', yZero)
8711
- // // .style('stroke', this.chartData.targetLineData.color);
8712
- // svgYAxisRight
8713
- // .append('foreignObject')
8714
- // .attr('transform', 'translate(' + 0 + ',' + (yZero - 30) + ')')
8715
- // .attr('width', rightSvgWidth)
8716
- // .attr('height', 50)
8717
- // .append('xhtml:div')
8718
- // .attr('class', 'target-display')
8719
- // .style('color', 'var(--chart-text-color)')
8720
- // .html(function () {
8721
- // let dataTypeTemp = '';
8722
- // let targetLineName = 'target';
8723
- // if (metaData.dataType) {
8724
- // dataTypeTemp = metaData.dataType;
8725
- // }
8726
- // if (
8727
- // self.chartData.targetLineData &&
8728
- // self.chartData.targetLineData.targetName
8729
- // ) {
8730
- // targetLineName = self.chartData.targetLineData.targetName;
8731
- // }
8732
- // return (
8733
- // `<div>${targetLineName}</div>` +
8734
- // '<div>' +
8735
- // self.chartData.targetLineData.target +
8736
- // '' +
8737
- // dataTypeTemp +
8738
- // '</div>'
8739
- // );
8740
- // });
8741
- // }
8742
- // if (this.chartConfiguration.isDrilldownChart) {
8743
- // /**
8744
- // * used by drilldown charts
8745
- // */
8746
- // // svg
8747
- // // .selectAll('.lib-axis-group-label')
8748
- // // .attr('class', 'lib-ylabel-drilldowncharts')
8749
- // // .text(metaData.yLabel.toLowerCase());
8750
- // svg.selectAll('g.x1.axis1 g.tick line').style('display', 'none');
8751
- // }
8752
- // if (metaData.xLabel) {
8753
- // function isAcronym(label) {
8754
- // return (
8755
- // (label.length <= 4 && /^[A-Z]+$/.test(label)) ||
8756
- // (label === label.toUpperCase() && /[A-Z]/.test(label))
8757
- // );
8758
- // }
8759
- // const xLabelText = metaData.xLabel;
8760
- // const isAcr = isAcronym(xLabelText.replace(/[^A-Za-z]/g, ''));
8761
- // const xPosition = isria ? (height + margin.top + margin.bottom) : (height + margin.top + margin.bottom + 40);
8762
- // svg
8763
- // .append('text')
8764
- // .attr('class', function () {
8765
- // let baseClass = 'lib-axis-group-label font-size-1';
8766
- // if (self.chartConfiguration.isDrilldownChart)
8767
- // return baseClass + ' lib-xlabel-drilldowncharts';
8768
- // if (self.chartConfiguration.isMultiChartGridLine != undefined)
8769
- // return baseClass + ' lib-xlabel-weeklyCharts';
8770
- // return baseClass + ' lib-axis-waterfall-label';
8771
- // })
8772
- // .attr('style', self.chartConfiguration.xAxisCustomlabelStyles)
8773
- // .attr(
8774
- // 'transform',
8775
- // 'translate(' + width / 2 + ' ,' + xPosition + ')'
8776
- // )
8777
- // .style('text-anchor', 'middle')
8778
- // .style('fill', 'var(--chart-text-color)')
8779
- // .text(isAcr ? xLabelText.toUpperCase() : xLabelText.toLowerCase())
8780
- // .style('text-transform', isAcr ? 'none' : 'capitalize');
8781
- // }
8782
- // if (metaData.lineyLabel) {
8783
- // svgYAxisRight
8784
- // .append('text')
8785
- // .attr('class', 'lib-axis-group-label lib-line-axis')
8786
- // .attr('fill', 'var(--chart-text-color)')
8787
- // .attr('style', self.chartConfiguration.yAxisCustomlabelStyles)
8788
- // .attr('transform', 'translate(0,0) rotate(90)')
8789
- // .attr('y', 0 - 100)
8790
- // .attr('x', 0 + 100)
8791
- // .attr('dy', '5em')
8792
- // .style('text-anchor', 'middle')
8793
- // .style('font-size', 'smaller')
8794
- // .text(metaData.lineyLabel);
8795
- // }
8796
- // if (lineData) {
8797
- // svg
8798
- // .append('path')
8799
- // .datum(lineData)
8800
- // .attr('fill', 'none')
8801
- // .attr('stroke', self.chartConfiguration.lineGraphColor)
8802
- // .attr('stroke-width', 1.5)
8803
- // .attr(
8804
- // 'd',
8805
- // d3
8806
- // .line()
8807
- // .x(function (d) {
8808
- // return x(d.name) + x.bandwidth() / 2;
8809
- // })
8810
- // .y(function (d) {
8811
- // return lineYscale(d.value);
8812
- // })
8813
- // );
8814
- // var dot = svg
8815
- // .selectAll('myCircles')
8816
- // .data(lineData)
8817
- // .enter()
8818
- // .append('g')
8819
- // .on('click', function (d) {
8820
- // if (
8821
- // !metaData.barWithoutClick ||
8822
- // !metaData.barWithoutClick.length ||
8823
- // (!metaData.barWithoutClick.includes(d?.name) &&
8824
- // !metaData.barWithoutClick.includes(d?.key))
8825
- // )
8826
- // self.handleClick(d);
8827
- // });
8828
- // dot
8829
- // .append('circle')
8830
- // .attr('fill', function (d) {
8831
- // return self.chartConfiguration.lineGraphColor;
8832
- // })
8833
- // .attr('stroke', 'none')
8834
- // .attr('cx', function (d) {
8835
- // return x(d.name) + x.bandwidth() / 2;
8836
- // })
8837
- // .attr('cy', function (d) {
8838
- // return lineYscale(d.value);
8839
- // })
8840
- // .style('cursor', () =>
8841
- // self.chartData.metaData.hasDrillDown ? 'pointer' : 'default'
8842
- // )
8843
- // .attr('r', 3);
8844
- // if (self.chartConfiguration.lineGraphColor) {
8845
- // dot
8846
- // .append('text')
8847
- // .attr('class', 'dot')
8848
- // .attr('fill', 'var(--chart-text-color)')
8849
- // .attr('color', self.chartConfiguration.lineGraphColor)
8850
- // .attr('style', 'font-size: ' + '.85em')
8851
- // .attr('x', function (d, i) {
8852
- // return x(d.name) + x.bandwidth() / 2;
8853
- // })
8854
- // .attr('y', function (d) {
8855
- // return lineYscale(d.value);
8856
- // })
8857
- // .attr('dy', '-1em')
8858
- // .text(function (d) {
8859
- // return self.chartConfiguration.labelFormatter(d.value);
8860
- // });
8861
- // }
8862
- // }
8863
- // }
8864
7628
  initializegroupChart() {
8865
7629
  // ==================== VARIABLE DECLARATIONS ====================
8866
7630
  const self = this;
@@ -8962,10 +7726,12 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
8962
7726
  .domain(data.map((d) => d.name.toLowerCase()));
8963
7727
  }
8964
7728
  else {
7729
+ // Increase padding for mobile view to add space after every bar group
7730
+ const barGroupPadding = isMobile ? 0.6 : 0.3;
8965
7731
  x = d3.scaleBand()
8966
7732
  .domain(groups)
8967
7733
  .range([LEFT_AND_RIGHT_SPACES, width - RIGHT_SVG_WIDTH - LEFT_AND_RIGHT_SPACES])
8968
- .padding([0.3]);
7734
+ .padding([barGroupPadding]);
8969
7735
  }
8970
7736
  const xScaleFromOrigin = d3.scaleBand()
8971
7737
  .domain(groups)