axidio-styleguide-library1-v2 0.3.60 → 0.3.61

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