axidio-styleguide-library1-v2 0.3.60 → 0.3.62
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.
- package/esm2022/lib/horizontal-bars-with-scroll-zoom/horizontal-bars-with-scroll-zoom.component.mjs +26 -27
- package/esm2022/lib/horizontal-grouped-bar-with-scroll-zoom/horizontal-grouped-bar-with-scroll-zoom.component.mjs +88 -1265
- package/fesm2022/axidio-styleguide-library1-v2.mjs +112 -1290
- package/fesm2022/axidio-styleguide-library1-v2.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -6667,7 +6667,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
6667
6667
|
.attr('width', '80')
|
|
6668
6668
|
.attr('height', dimensions.height + margin.top + margin.bottom)
|
|
6669
6669
|
.append('g')
|
|
6670
|
-
.attr('transform', `translate(
|
|
6670
|
+
.attr('transform', `translate(70,${margin.top})`);
|
|
6671
6671
|
// Right Y-axis - Fixed
|
|
6672
6672
|
const rightAxisContainer = chartWrapper
|
|
6673
6673
|
.append('div')
|
|
@@ -7008,30 +7008,29 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
7008
7008
|
}
|
|
7009
7009
|
return `${baseClass} lib-axis-waterfall-label`;
|
|
7010
7010
|
}
|
|
7011
|
-
renderGridsFromLeftAxis(
|
|
7012
|
-
if (
|
|
7013
|
-
|
|
7014
|
-
|
|
7015
|
-
|
|
7016
|
-
|
|
7017
|
-
|
|
7018
|
-
|
|
7019
|
-
|
|
7020
|
-
|
|
7021
|
-
|
|
7022
|
-
|
|
7023
|
-
|
|
7024
|
-
|
|
7025
|
-
|
|
7026
|
-
|
|
7027
|
-
|
|
7028
|
-
|
|
7029
|
-
|
|
7030
|
-
|
|
7031
|
-
|
|
7032
|
-
|
|
7033
|
-
|
|
7034
|
-
});
|
|
7011
|
+
renderGridsFromLeftAxis(svgYAxisLeft, scales, dimensions) {
|
|
7012
|
+
if (this.chartConfiguration.yAxisGrid) {
|
|
7013
|
+
// Calculate how far the grid lines need to extend
|
|
7014
|
+
// They start from the left Y-axis (at x=80) and go to the full width
|
|
7015
|
+
const gridWidth = dimensions.requiredSvgWidth + 80 + this.CONSTANTS.RIGHT_SVG_WIDTH;
|
|
7016
|
+
svgYAxisLeft
|
|
7017
|
+
.append('g')
|
|
7018
|
+
.attr('class', 'grid horizontal-grid-from-left')
|
|
7019
|
+
.attr('transform', 'translate(0,0)')
|
|
7020
|
+
.call(d3
|
|
7021
|
+
.axisLeft(scales.yScale)
|
|
7022
|
+
.ticks(this.chartConfiguration.numberOfYTicks)
|
|
7023
|
+
.tickSize(-gridWidth) // Negative to extend right
|
|
7024
|
+
.tickFormat(''))
|
|
7025
|
+
.style('color', 'var(--chart-grid-color)')
|
|
7026
|
+
.style('opacity', '1')
|
|
7027
|
+
.call((g) => {
|
|
7028
|
+
g.select('.domain').remove();
|
|
7029
|
+
g.selectAll('.tick line')
|
|
7030
|
+
.style('stroke', 'var(--chart-grid-color)')
|
|
7031
|
+
.style('stroke-width', '1px');
|
|
7032
|
+
});
|
|
7033
|
+
}
|
|
7035
7034
|
}
|
|
7036
7035
|
applyConfigurationFlags() {
|
|
7037
7036
|
if (this.chartConfiguration.isHeaderVisible !== undefined) {
|
|
@@ -7067,7 +7066,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
7067
7066
|
data.sort((a, b) => b.total - a.total);
|
|
7068
7067
|
const scales = this.createScales(data, layers, lineData, dimensions);
|
|
7069
7068
|
const axes = this.createAxes(scales);
|
|
7070
|
-
this.renderGridsFromLeftAxis(
|
|
7069
|
+
this.renderGridsFromLeftAxis(svgYAxisLeft, scales, dimensions);
|
|
7071
7070
|
this.renderGrids(svg, scales, dimensions);
|
|
7072
7071
|
const rect = this.renderBars(svg, layers, scales, metaData, dimensions);
|
|
7073
7072
|
this.renderAxes(svg, svgYAxisLeft, svgYAxisRight, axes, scales, dimensions, data);
|
|
@@ -7609,1242 +7608,6 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
7609
7608
|
get isAlertEnabled() {
|
|
7610
7609
|
return this.chartConfiguration?.headerMenuOptions?.some((option) => option.id === 'editAlert');
|
|
7611
7610
|
}
|
|
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
7611
|
initializegroupChart() {
|
|
8849
7612
|
// ==================== VARIABLE DECLARATIONS ====================
|
|
8850
7613
|
const self = this;
|
|
@@ -8955,7 +7718,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
8955
7718
|
.domain(groups)
|
|
8956
7719
|
.range([0, width - RIGHT_SVG_WIDTH]);
|
|
8957
7720
|
// ==================== X-AXIS RENDERING ====================
|
|
8958
|
-
this.renderXAxis(svg, x, height, metaData, subgroups, data, SHORT_TICK_LENGTH_BG, LONG_TICK_LENGTH_BG, self, isria, isMobile);
|
|
7721
|
+
this.renderXAxis(svg, x, height, metaData, subgroups, data, SHORT_TICK_LENGTH_BG, LONG_TICK_LENGTH_BG, self, isria, isMobile, isTablet);
|
|
8959
7722
|
// ==================== Y-AXIS SETUP ====================
|
|
8960
7723
|
const y = d3.scaleLinear().rangeRound([height, 0]);
|
|
8961
7724
|
let maxValue = this.calculateMaxValue(data, keyList);
|
|
@@ -9006,13 +7769,18 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
9006
7769
|
}
|
|
9007
7770
|
}
|
|
9008
7771
|
// ==================== HELPER METHODS ====================
|
|
9009
|
-
renderXAxis(svg, x, height, metaData, subgroups, data, shortTickLengthBg, longTickLengthBg, self, isria, isMobile) {
|
|
7772
|
+
renderXAxis(svg, x, height, metaData, subgroups, data, shortTickLengthBg, longTickLengthBg, self, isria, isMobile, isTablet) {
|
|
9010
7773
|
let alternate_text = false;
|
|
9011
7774
|
if (this.chartConfiguration.isMultiChartGridLine === undefined) {
|
|
9012
7775
|
// Normal ticks for dashboard charts
|
|
7776
|
+
// Dynamically adjust Y translation for mobile
|
|
7777
|
+
let translateY = height;
|
|
7778
|
+
if (isMobile) {
|
|
7779
|
+
translateY = height + 15; // Add extra space at the top for mobile
|
|
7780
|
+
}
|
|
9013
7781
|
svg.append('g')
|
|
9014
7782
|
.attr('class', 'x1 axis1')
|
|
9015
|
-
.attr('transform', `translate(0,${
|
|
7783
|
+
.attr('transform', `translate(0,${translateY})`)
|
|
9016
7784
|
.call(d3.axisBottom(x))
|
|
9017
7785
|
.call((g) => g.select('.domain').remove());
|
|
9018
7786
|
svg.selectAll('g.x1.axis1 g.tick line').remove();
|
|
@@ -9072,7 +7840,23 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
9072
7840
|
.attr('x', 5)
|
|
9073
7841
|
.style('text-anchor', 'middle');
|
|
9074
7842
|
}
|
|
9075
|
-
//
|
|
7843
|
+
// ✅ Tablet View — Rotate if text > 10 characters
|
|
7844
|
+
if (isTablet) {
|
|
7845
|
+
const textNodes = svg.selectAll('g.x1.axis1 g.tick text');
|
|
7846
|
+
textNodes.each(function (d) {
|
|
7847
|
+
const text = d ? d.toString().trim() : '';
|
|
7848
|
+
// Detect date formats (to skip them)
|
|
7849
|
+
const isDateString = /^\d{1,4}[-\/]\d{1,2}[-\/]\d{1,4}$/.test(text) || // e.g. 2025-10-29 or 10/29/2025
|
|
7850
|
+
/^(\d{1,4}[-\/]\d{1,2}[-\/]\d{1,4})\s*[-–]\s*(\d{1,4}[-\/]\d{1,2}[-\/]\d{1,4})$/.test(text);
|
|
7851
|
+
if (!isDateString && text.length > 10) {
|
|
7852
|
+
const trimmed = text.slice(0, 9) + '…';
|
|
7853
|
+
textNodes
|
|
7854
|
+
.style('font-size', '10px');
|
|
7855
|
+
// .text(trimmed)
|
|
7856
|
+
}
|
|
7857
|
+
});
|
|
7858
|
+
}
|
|
7859
|
+
// Mobile/tablet override - check for single-group date charts first
|
|
9076
7860
|
if (isMobile) {
|
|
9077
7861
|
const textNodes = svg.selectAll('g.x1.axis1 g.tick text');
|
|
9078
7862
|
const groupsCount = data.length || 0;
|
|
@@ -9086,8 +7870,14 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
9086
7870
|
hasDateValues = true;
|
|
9087
7871
|
}
|
|
9088
7872
|
});
|
|
9089
|
-
|
|
9090
|
-
|
|
7873
|
+
// Count unique x-axis labels
|
|
7874
|
+
const uniqueLabels = new Set();
|
|
7875
|
+
textNodes.each(function (d) {
|
|
7876
|
+
uniqueLabels.add(d);
|
|
7877
|
+
});
|
|
7878
|
+
const labelCount = uniqueLabels.size;
|
|
7879
|
+
if (hasDateValues && labelCount <= 3) {
|
|
7880
|
+
// For 3 or fewer labels, keep horizontal display
|
|
9091
7881
|
textNodes
|
|
9092
7882
|
.style('writing-mode', 'horizontal-tb') // Explicitly set horizontal
|
|
9093
7883
|
.classed('mobile-xaxis-override', false) // Remove vertical class
|
|
@@ -9097,19 +7887,19 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
9097
7887
|
.attr('dx', '0') // Reset any x offset
|
|
9098
7888
|
.attr('dy', '0'); // Reset any y offset
|
|
9099
7889
|
}
|
|
7890
|
+
else if (labelCount > 3) {
|
|
7891
|
+
// For more than 3 labels, use vertical alignment
|
|
7892
|
+
textNodes
|
|
7893
|
+
.style('writing-mode', 'sideways-lr') // Vertical text
|
|
7894
|
+
.classed('mobile-xaxis-override', true) // Add vertical class
|
|
7895
|
+
.attr('text-anchor', 'middle') // Center align
|
|
7896
|
+
.attr('y', 30) // Adjust vertical position
|
|
7897
|
+
.attr('x', 0); // Reset x position
|
|
7898
|
+
}
|
|
9100
7899
|
else if (!this.isHeaderVisible) {
|
|
9101
7900
|
// Default mobile behavior for non-date or multi-group
|
|
9102
7901
|
textNodes.classed('mobile-xaxis-override', true);
|
|
9103
7902
|
}
|
|
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
7903
|
}
|
|
9114
7904
|
}
|
|
9115
7905
|
applyXLabelsOnSameLine(svg, subgroups, data, metaData, self, shortTickLengthBg, isMobile, isria) {
|
|
@@ -9174,15 +7964,49 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
9174
7964
|
return baseY;
|
|
9175
7965
|
}
|
|
9176
7966
|
formatXLabelText(d, data, metaData, subgroups, self, isMobile) {
|
|
9177
|
-
//
|
|
7967
|
+
// Check if we're on mobile or tablet
|
|
7968
|
+
const isSmallScreen = window.innerWidth < 992; // Less than 992px (mobile or tablet)
|
|
7969
|
+
// Helper to extract and format week number
|
|
7970
|
+
const extractWeekNumber = (text) => {
|
|
7971
|
+
const match = text.match(/(?:week|wk|w)\s*(\d+)/i);
|
|
7972
|
+
return match ? `W${match[1]}` : null;
|
|
7973
|
+
};
|
|
7974
|
+
// Helper to extract date part
|
|
7975
|
+
const extractDate = (text) => {
|
|
7976
|
+
const match = text.match(/\d{2}[-\/]\d{2}[-\/]\d{2,4}/);
|
|
7977
|
+
return match ? match[0] : null;
|
|
7978
|
+
};
|
|
7979
|
+
// Check if label contains both date and week information
|
|
7980
|
+
const hasDateAndTime = (text) => {
|
|
7981
|
+
const dateMatch = /\d{2,4}[-\/]\d{1,2}[-\/]\d{1,4}/.test(text);
|
|
7982
|
+
const weekMatch = /(?:week|wk|w)\s*\d+/i.test(text);
|
|
7983
|
+
return { isDate: dateMatch, isWeek: weekMatch };
|
|
7984
|
+
};
|
|
7985
|
+
const labelInfo = hasDateAndTime(d);
|
|
7986
|
+
// Mobile handling: format date and week parts
|
|
9178
7987
|
if (isMobile) {
|
|
9179
|
-
|
|
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
|
|
7988
|
+
// If header is hidden (compact mobile)
|
|
9185
7989
|
if (!self.isHeaderVisible) {
|
|
7990
|
+
// If it has both date and week, format appropriately
|
|
7991
|
+
if (labelInfo.isDate && labelInfo.isWeek) {
|
|
7992
|
+
const datePart = extractDate(d);
|
|
7993
|
+
const weekPart = extractWeekNumber(d);
|
|
7994
|
+
if (datePart && weekPart) {
|
|
7995
|
+
return `${datePart}\n${weekPart}`;
|
|
7996
|
+
}
|
|
7997
|
+
}
|
|
7998
|
+
// If it's just a date, return it unchanged
|
|
7999
|
+
if (labelInfo.isDate) {
|
|
8000
|
+
return extractDate(d) || d;
|
|
8001
|
+
}
|
|
8002
|
+
// If it has just week number, format it as W##
|
|
8003
|
+
if (labelInfo.isWeek) {
|
|
8004
|
+
const weekPart = extractWeekNumber(d);
|
|
8005
|
+
if (weekPart) {
|
|
8006
|
+
return weekPart;
|
|
8007
|
+
}
|
|
8008
|
+
}
|
|
8009
|
+
// For non-date labels, trim as before
|
|
9186
8010
|
const firstPart = d.split(/[\s\-]+/)[0];
|
|
9187
8011
|
return firstPart.substring(0, 3).toLowerCase();
|
|
9188
8012
|
}
|
|
@@ -9198,17 +8022,15 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
9198
8022
|
if (dateRangeRegex.test(d.trim())) {
|
|
9199
8023
|
return d.trim().replace(dateRangeRegex, (m, d1, d2) => `${d1} - ${d2}`);
|
|
9200
8024
|
}
|
|
9201
|
-
//
|
|
9202
|
-
const isDateLabel = /\d{2,4}[-\/]/.test(d);
|
|
9203
|
-
const isWeekLabel = /week|wk|w\d+/i.test(d);
|
|
8025
|
+
// Handle splitting of multi-part labels
|
|
9204
8026
|
if (subgroups.length > 1 && !self.isZoomedOut && data.length > 8 &&
|
|
9205
|
-
d.indexOf(' ') > -1 && (
|
|
8027
|
+
d.indexOf(' ') > -1 && (labelInfo.isDate || labelInfo.isWeek)) {
|
|
9206
8028
|
const first = d.substring(0, d.indexOf(' '));
|
|
9207
8029
|
const second = d.substring(d.indexOf(' ') + 1).trim();
|
|
9208
8030
|
return `${first}\n${second}`;
|
|
9209
8031
|
}
|
|
9210
8032
|
// Handle date labels in minimized view
|
|
9211
|
-
if (
|
|
8033
|
+
if (labelInfo.isDate) {
|
|
9212
8034
|
if (!self.isHeaderVisible && data.length > 8 && d.indexOf(' ') > -1) {
|
|
9213
8035
|
const first = d.substring(0, d.indexOf(' '));
|
|
9214
8036
|
const second = d.substring(d.indexOf(' ') + 1).trim();
|
|
@@ -9807,7 +8629,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
9807
8629
|
// Minimum width per bar group based on device and number of subgroups
|
|
9808
8630
|
const minWidthPerGroup = (() => {
|
|
9809
8631
|
if (subgroupsCount > 2) {
|
|
9810
|
-
return isMobile ?
|
|
8632
|
+
return isMobile ? 100 : isTablet ? 100 : 120; // Wider for multiple subgroups
|
|
9811
8633
|
}
|
|
9812
8634
|
return isMobile ? 40 : isTablet ? 60 : 80; // Normal width for 1-2 subgroups
|
|
9813
8635
|
})();
|