axidio-styleguide-library1-v2 0.2.91 → 0.2.92
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.
|
@@ -7786,11 +7786,111 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
7786
7786
|
}
|
|
7787
7787
|
}
|
|
7788
7788
|
// ==================== HELPER METHODS ====================
|
|
7789
|
+
// private renderXAxis(svg, x, height, metaData, subgroups, data,
|
|
7790
|
+
// shortTickLengthBg, longTickLengthBg, self, isria, isMobile, isTablet) {
|
|
7791
|
+
// let alternate_text = false;
|
|
7792
|
+
// if (this.chartConfiguration.isMultiChartGridLine === undefined) {
|
|
7793
|
+
// // Normal ticks for dashboard charts
|
|
7794
|
+
// // Dynamically adjust Y translation for mobile
|
|
7795
|
+
// let translateY = height;
|
|
7796
|
+
// if (isMobile) {
|
|
7797
|
+
// translateY = height + 26; // Add extra space at the top for mobile
|
|
7798
|
+
// }
|
|
7799
|
+
// svg.append('g')
|
|
7800
|
+
// .attr('class', 'x1 axis1')
|
|
7801
|
+
// .attr('transform', `translate(0,${translateY})`)
|
|
7802
|
+
// .call(d3.axisBottom(x))
|
|
7803
|
+
// .call((g) => g.select('.domain').remove());
|
|
7804
|
+
// svg.selectAll('g.x1.axis1 g.tick line').remove();
|
|
7805
|
+
// const yOffset = subgroups.length > 1 && !metaData.xLabel ? 32 : 0;
|
|
7806
|
+
// svg.selectAll('g.x1.axis1 g.tick text')
|
|
7807
|
+
// .attr('class', 'lib-xaxis-labels-texts-drilldown')
|
|
7808
|
+
// .style('fill', 'var(--chart-text-color)')
|
|
7809
|
+
// .attr('y', yOffset || null);
|
|
7810
|
+
// } else {
|
|
7811
|
+
// // Bigger ticks for weekly charts
|
|
7812
|
+
// svg.append('g')
|
|
7813
|
+
// .attr('class', 'x1 axis1')
|
|
7814
|
+
// .attr('transform', `translate(0,${height})`)
|
|
7815
|
+
// .call(d3.axisBottom(x).tickSize(0))
|
|
7816
|
+
// .call((g) => g.select('.domain').attr('fill', 'none'));
|
|
7817
|
+
// // Alternate tick line sizes
|
|
7818
|
+
// svg.selectAll('g.x1.axis1 g.tick line').attr('y2', function () {
|
|
7819
|
+
// if (alternate_text && self.chartConfiguration.isNoAlternateXaxisText === undefined) {
|
|
7820
|
+
// alternate_text = false;
|
|
7821
|
+
// return longTickLengthBg - 7;
|
|
7822
|
+
// } else {
|
|
7823
|
+
// alternate_text = true;
|
|
7824
|
+
// return shortTickLengthBg - 4;
|
|
7825
|
+
// }
|
|
7826
|
+
// });
|
|
7827
|
+
// alternate_text = false;
|
|
7828
|
+
// // X-axis label texts
|
|
7829
|
+
// svg.selectAll('g.x1.axis1 g.tick text')
|
|
7830
|
+
// .attr('class', 'lib-xaxis-labels-texts-weeklycharts')
|
|
7831
|
+
// .attr('y', function () {
|
|
7832
|
+
// if (self.chartConfiguration.isFullScreen) {
|
|
7833
|
+
// return shortTickLengthBg;
|
|
7834
|
+
// }
|
|
7835
|
+
// if (alternate_text) {
|
|
7836
|
+
// alternate_text = false;
|
|
7837
|
+
// return longTickLengthBg;
|
|
7838
|
+
// } else {
|
|
7839
|
+
// alternate_text = true;
|
|
7840
|
+
// return shortTickLengthBg;
|
|
7841
|
+
// }
|
|
7842
|
+
// });
|
|
7843
|
+
// }
|
|
7844
|
+
// // Apply labels on same line configuration
|
|
7845
|
+
// if (self.chartConfiguration.xLabelsOnSameLine) {
|
|
7846
|
+
// this.applyXLabelsOnSameLine(svg, subgroups, data, metaData, self,
|
|
7847
|
+
// shortTickLengthBg, isMobile, isria);
|
|
7848
|
+
// }
|
|
7849
|
+
// // Mobile override for RIA
|
|
7850
|
+
// if (isria && self.chartData.data.length > 8) {
|
|
7851
|
+
// svg.selectAll('g.x1.axis1 g.tick text')
|
|
7852
|
+
// .classed('mobile-xaxis-override', true)
|
|
7853
|
+
// .text((d: string) => d.substring(0, 3))
|
|
7854
|
+
// .style('font-size', '12px')
|
|
7855
|
+
// .attr('y', 5)
|
|
7856
|
+
// .attr('x', 5)
|
|
7857
|
+
// .style('text-anchor', 'middle');
|
|
7858
|
+
// }
|
|
7859
|
+
// // Mobile/tablet override - check for single-group date charts first
|
|
7860
|
+
// if (isMobile) {
|
|
7861
|
+
// const textNodes = svg.selectAll('g.x1.axis1 g.tick text');
|
|
7862
|
+
// const groupsCount = (data as any).length || 0;
|
|
7863
|
+
// // Check if we have dates in x-axis and single group
|
|
7864
|
+
// let hasDateValues = false;
|
|
7865
|
+
// textNodes.each(function(d) {
|
|
7866
|
+
// // Check for date values using both Date.parse and regex for date format
|
|
7867
|
+
// const isDateString =
|
|
7868
|
+
// /^\d{1,4}[-\/]\d{1,2}[-\/]\d{1,4}$/.test(d.trim()) ||
|
|
7869
|
+
// /^(\d{1,4}[-\/]\d{1,2}[-\/]\d{1,4})\s*[-–]\s*(\d{1,4}[-\/]\d{1,2}[-\/]\d{1,4})$/.test(d.trim());
|
|
7870
|
+
// if (!hasDateValues && isDateString) {
|
|
7871
|
+
// hasDateValues = true;
|
|
7872
|
+
// }
|
|
7873
|
+
// });
|
|
7874
|
+
// if (hasDateValues && subgroups && subgroups.length < 3) {
|
|
7875
|
+
// // For single chart with dates, ensure horizontal display
|
|
7876
|
+
// textNodes
|
|
7877
|
+
// .style('writing-mode', 'horizontal-tb') // Explicitly set horizontal
|
|
7878
|
+
// .classed('mobile-xaxis-override', false) // Remove vertical class
|
|
7879
|
+
// .attr('transform', 'rotate(0)') // Remove any rotation
|
|
7880
|
+
// .attr('text-anchor', 'middle') // Center align
|
|
7881
|
+
// .attr('y', 20) // Push down a bit
|
|
7882
|
+
// .attr('dx', '0') // Reset any x offset
|
|
7883
|
+
// .attr('dy', '0'); // Reset any y offset
|
|
7884
|
+
// } else if (!this.isHeaderVisible) {
|
|
7885
|
+
// // Default mobile behavior for non-date or multi-group
|
|
7886
|
+
// textNodes.classed('mobile-xaxis-override', true);
|
|
7887
|
+
// }
|
|
7888
|
+
// }
|
|
7889
|
+
// }
|
|
7789
7890
|
renderXAxis(svg, x, height, metaData, subgroups, data, shortTickLengthBg, longTickLengthBg, self, isria, isMobile, isTablet) {
|
|
7790
7891
|
let alternate_text = false;
|
|
7791
7892
|
if (this.chartConfiguration.isMultiChartGridLine === undefined) {
|
|
7792
7893
|
// Normal ticks for dashboard charts
|
|
7793
|
-
// Dynamically adjust Y translation for mobile
|
|
7794
7894
|
let translateY = height;
|
|
7795
7895
|
if (isMobile) {
|
|
7796
7896
|
translateY = height + 26; // Add extra space at the top for mobile
|
|
@@ -7814,7 +7914,6 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
7814
7914
|
.attr('transform', `translate(0,${height})`)
|
|
7815
7915
|
.call(d3.axisBottom(x).tickSize(0))
|
|
7816
7916
|
.call((g) => g.select('.domain').attr('fill', 'none'));
|
|
7817
|
-
// Alternate tick line sizes
|
|
7818
7917
|
svg.selectAll('g.x1.axis1 g.tick line').attr('y2', function () {
|
|
7819
7918
|
if (alternate_text && self.chartConfiguration.isNoAlternateXaxisText === undefined) {
|
|
7820
7919
|
alternate_text = false;
|
|
@@ -7826,13 +7925,11 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
7826
7925
|
}
|
|
7827
7926
|
});
|
|
7828
7927
|
alternate_text = false;
|
|
7829
|
-
// X-axis label texts
|
|
7830
7928
|
svg.selectAll('g.x1.axis1 g.tick text')
|
|
7831
7929
|
.attr('class', 'lib-xaxis-labels-texts-weeklycharts')
|
|
7832
7930
|
.attr('y', function () {
|
|
7833
|
-
if (self.chartConfiguration.isFullScreen)
|
|
7931
|
+
if (self.chartConfiguration.isFullScreen)
|
|
7834
7932
|
return shortTickLengthBg;
|
|
7835
|
-
}
|
|
7836
7933
|
if (alternate_text) {
|
|
7837
7934
|
alternate_text = false;
|
|
7838
7935
|
return longTickLengthBg;
|
|
@@ -7857,44 +7954,46 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
|
|
|
7857
7954
|
.attr('x', 5)
|
|
7858
7955
|
.style('text-anchor', 'middle');
|
|
7859
7956
|
}
|
|
7860
|
-
// Mobile/tablet override
|
|
7861
|
-
|
|
7862
|
-
|
|
7957
|
+
// Mobile/tablet override
|
|
7958
|
+
const textNodes = svg.selectAll('g.x1.axis1 g.tick text');
|
|
7959
|
+
let hasDateValues = false;
|
|
7960
|
+
textNodes.each(function (d) {
|
|
7961
|
+
const isDateString = /^\d{1,4}[-\/]\d{1,2}[-\/]\d{1,4}$/.test(d.trim()) ||
|
|
7962
|
+
/^(\d{1,4}[-\/]\d{1,2}[-\/]\d{1,4})\s*[-–]\s*(\d{1,4}[-\/]\d{1,2}[-\/]\d{1,4})$/.test(d.trim()) ||
|
|
7963
|
+
/^\d{1,2}\/\d{1,2}\/\d{4}\s*week\s*\d+$/i.test(d.trim());
|
|
7964
|
+
if (!hasDateValues && isDateString)
|
|
7965
|
+
hasDateValues = true;
|
|
7966
|
+
});
|
|
7967
|
+
// Trim "week" and year in labels if present
|
|
7968
|
+
textNodes.text(function (d) {
|
|
7969
|
+
if (/week/i.test(d)) {
|
|
7970
|
+
// Example: "10/02/2025 week 23" → "10/02"
|
|
7971
|
+
const match = d.match(/^(\d{1,2}\/\d{1,2})/);
|
|
7972
|
+
return match ? match[1] : d.replace(/week\s*\d+/i, '').trim();
|
|
7973
|
+
}
|
|
7974
|
+
return d;
|
|
7975
|
+
});
|
|
7976
|
+
// Apply rotation for tablet view with date labels
|
|
7977
|
+
if (isTablet && hasDateValues) {
|
|
7978
|
+
textNodes
|
|
7979
|
+
.style('writing-mode', 'sideways-lr')
|
|
7980
|
+
.style('text-anchor', 'start')
|
|
7981
|
+
.attr('dy', '0.5em')
|
|
7982
|
+
.attr('dx', '-0.3em');
|
|
7983
|
+
}
|
|
7984
|
+
// For mobile - ensure horizontal spacing and adjustment
|
|
7985
|
+
if (isMobile) {
|
|
7863
7986
|
const groupsCount = data.length || 0;
|
|
7864
|
-
|
|
7865
|
-
|
|
7866
|
-
|
|
7867
|
-
|
|
7868
|
-
|
|
7869
|
-
|
|
7870
|
-
|
|
7871
|
-
|
|
7872
|
-
}
|
|
7873
|
-
});
|
|
7874
|
-
if (hasDateValues) {
|
|
7875
|
-
if (isTablet) {
|
|
7876
|
-
// For tablet view with dates, rotate vertically
|
|
7877
|
-
textNodes
|
|
7878
|
-
.style('writing-mode', 'sideways-lr')
|
|
7879
|
-
.style('text-anchor', 'middle')
|
|
7880
|
-
.attr('y', 0)
|
|
7881
|
-
.attr('dx', '0')
|
|
7882
|
-
.attr('dy', '0');
|
|
7883
|
-
}
|
|
7884
|
-
else if (isMobile && subgroups && subgroups.length < 3) {
|
|
7885
|
-
// For mobile single chart with dates, keep horizontal
|
|
7886
|
-
textNodes
|
|
7887
|
-
.style('writing-mode', 'horizontal-tb')
|
|
7888
|
-
.classed('mobile-xaxis-override', false)
|
|
7889
|
-
.attr('transform', 'rotate(0)')
|
|
7890
|
-
.attr('text-anchor', 'middle')
|
|
7891
|
-
.attr('y', 20)
|
|
7892
|
-
.attr('dx', '0')
|
|
7893
|
-
.attr('dy', '0');
|
|
7894
|
-
}
|
|
7987
|
+
if (hasDateValues && subgroups && subgroups.length < 3) {
|
|
7988
|
+
textNodes
|
|
7989
|
+
.style('writing-mode', 'horizontal-tb')
|
|
7990
|
+
.attr('transform', 'rotate(0)')
|
|
7991
|
+
.attr('text-anchor', 'middle')
|
|
7992
|
+
.attr('y', 20)
|
|
7993
|
+
.attr('dx', '0')
|
|
7994
|
+
.attr('dy', '0');
|
|
7895
7995
|
}
|
|
7896
7996
|
else if (!this.isHeaderVisible) {
|
|
7897
|
-
// Default mobile/tablet behavior for non-date labels
|
|
7898
7997
|
textNodes.classed('mobile-xaxis-override', true);
|
|
7899
7998
|
}
|
|
7900
7999
|
}
|