Skip to content

Commit

Permalink
Build: (c39a899) Merge pull request #71 from mayurmarakana89/geochart…
Browse files Browse the repository at this point in the history 
…-theme-styling

add markers to x & y sliders under geochart & update font family
  • Loading branch information
@jolevesq
jolevesq committed Mar 26, 2024
1 parent 3cbae01 commit 31ddd83
Showing 1 changed file with 205 additions and 23 deletions.
228 changes: 205 additions & 23 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46332,9 +46332,12 @@ function createChartJSOptions(chartConfig, defaultOptions, language) {
x: {
type: (_chartConfig$geochart5 = chartConfig.geochart.xAxis) === null || _chartConfig$geochart5 === void 0 ? void 0 : _chartConfig$geochart5.type,
ticks: {
autoSkip: true,
maxTicksLimit: 20,
major: {
enabled: true
},
padding: 10,
source: 'auto',
// eslint-disable-next-line @typescript-eslint/no-unused-vars
callback: function callback(tickValue, index, ticks) {
Expand All @@ -46355,7 +46358,8 @@ function createChartJSOptions(chartConfig, defaultOptions, language) {
// No label, redundant
return '';
}
}
},
offset: true
}
});
}
Expand Down Expand Up @@ -46430,6 +46434,7 @@ var getSxClasses = function getSxClasses(theme) {
var _theme$palette$geoVie, _theme$palette$geoVie2;
return {
mainContainer: {
fontFamily: theme.typography.body1.fontFamily,
borderColor: theme.palette.geoViewColor.primary.main,
borderWidth: '2px',
borderStyle: 'solid',
Expand Down Expand Up @@ -46470,29 +46475,35 @@ var getSxClasses = function getSxClasses(theme) {
}
},
dataset: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
justifyContent: 'center',
textAlign: 'center'
},
title: {
fontWeight: 'bold',
fontSize: theme.palette.geoViewFontSize.lg,
fontFamily: theme.typography.h5.fontFamily,
fontWeight: theme.typography.h5.fontWeight,
fontSize: theme.typography.h5.fontSize,
textAlign: 'center',
margin: '10px 0px'
},
xAxisLabel: {
fontFamily: theme.typography.body1.fontFamily,
fontWeight: theme.typography.fontWeightBold,
fontSize: theme.palette.geoViewFontSize["default"],
textAlign: 'center',
margin: '10px 0px',
fontWeight: 'bold'
margin: '10px 0px'
},
yAxisLabel: {
position: 'relative',
margin: 'auto',
fontFamily: theme.typography.body1.fontFamily,
fontWeight: theme.typography.fontWeightBold,
fontSize: theme.palette.geoViewFontSize["default"],
position: 'absolute',
top: '45%',
margin: '0 auto',
marginLeft: '20px',
writingMode: 'vertical-rl',
transform: 'rotate(-180deg)',
transformOrigin: 'bottom center',
fontWeight: 'bold',
marginTop: '-15%'
transformOrigin: 'center'
},
uiOptionsResetStates: {
display: 'inline-flex',
Expand All @@ -46511,23 +46522,57 @@ var getSxClasses = function getSxClasses(theme) {
}
},
checkDatasetLabel: {
fontFamily: theme.typography.body1.fontFamily,
display: 'inline-flex',
verticalAlign: 'middle',
marginRight: '20px !important'
verticalAlign: 'middle'
},
chartContent: {
position: 'relative'
},
xSliderWrapper: {
'& .MuiSlider-root': {
color: theme.palette.geoViewColor.primary.main
},
'& .MuiSlider-markLabel-overlap': {
marginTop: '20px'
},
'& .MuiSlider-markLabel-first': {
marginLeft: '-40px'
},
'& .MuiSlider-markLabel-last': {
marginLeft: '40px'
},
'& .markLabel-first': {
fontFamily: theme.typography.body1.fontFamily,
fontSize: theme.palette.geoViewFontSize.sm,
"float": 'left',
marginLeft: '-60px',
color: '#000',
opacity: 0.6
},
'& .markLabel-last': {
fontFamily: theme.typography.body1.fontFamily,
fontSize: theme.palette.geoViewFontSize.sm,
"float": 'right',
marginRight: '-60px',
color: '#000',
opacity: 0.6
}
},
ySliderWrapper: {
height: '75%',
height: '70%',
textAlign: 'center',
marginTop: '-20px',
marginLeft: '20px',
'& .MuiSlider-root': {
color: theme.palette.geoViewColor.primary.main
},
'& .markLabel-top, & .markLabel-bottom': {
fontFamily: theme.typography.body1.fontFamily,
fontSize: theme.palette.geoViewFontSize.sm,
marginLeft: '-30px',
color: '#000',
opacity: 0.6
}
},
loadingDatasource: {
Expand Down Expand Up @@ -46560,6 +46605,7 @@ function chart_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { va




/**
* Main props for the Chart.
* There are 2 main ways to create a chart:
Expand Down Expand Up @@ -47762,7 +47808,7 @@ function GeoChart(props) {
// Default behavior
// If current chart has time as xAxis
if ((inputs === null || inputs === void 0 || (_inputs$geochart = inputs.geochart) === null || _inputs$geochart === void 0 ? void 0 : _inputs$geochart.xAxis.type) === 'time' || (inputs === null || inputs === void 0 || (_inputs$geochart2 = inputs.geochart) === null || _inputs$geochart2 === void 0 ? void 0 : _inputs$geochart2.xAxis.type) === 'timeseries') {
return new Date(value).toLocaleDateString(i18n.language, DATE_OPTIONS_LONG);
return new Date(value).toLocaleDateString(i18n.language, DATE_OPTIONS_AXIS);
}

// Default value as is
Expand Down Expand Up @@ -47879,6 +47925,108 @@ function GeoChart(props) {
return /*#__PURE__*/(0,jsx_runtime.jsx)(Box, {});
};

/**
* Generate marker labels for the slider values
* @returns The array of slider markers
*/
var getMarkers = useCallback(function (sliderValues, handleSliderValueDisplay) {
var sliderMarks = [];
if (Array.isArray(sliderValues)) {
for (var i = 0; i < sliderValues.length; i++) {
sliderMarks.push({
value: sliderValues[i],
label: handleSliderValueDisplay(sliderValues[i])
});
}
}
return sliderMarks;
}, []);
var checkOverlap = function checkOverlap(prev, curr, next) {
var orientation = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'horizontal';
var labelPadding = 10;
var prevDim = prev ? prev.getBoundingClientRect() : null;
var currDim = curr ? curr.getBoundingClientRect() : null;
var nextDim = next ? next.getBoundingClientRect() : null;
if (prevDim === null || currDim === null || nextDim === null) {
return false;
}
var hasPrevOverlap = false;
var hasNextOverlap = false;
if (prevDim) {
hasPrevOverlap = orientation === 'vertical' ? prevDim.bottom + labelPadding > currDim.top : prevDim.right + labelPadding > currDim.left;
}
if (nextDim) {
hasNextOverlap = orientation === 'vertical' ? currDim.bottom + labelPadding > nextDim.top : currDim.right + labelPadding > nextDim.left;
}
return hasPrevOverlap || hasNextOverlap;
};

// eslint-disable-next-line react-hooks/exhaustive-deps
var removeLabelOverlap = function removeLabelOverlap(containerId) {
var _document$getElementB;
// Log
logger.logTraceCore('UI.SLIDER - window resize event');

// get slider labels
var markers = containerId ? ((_document$getElementB = document.getElementById(containerId)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.getElementsByClassName('MuiSlider-markLabel')) || [] : document.getElementsByClassName('MuiSlider-markLabel');
for (var i = 0; i < markers.length; i++) {
markers[0].classList.add('MuiSlider-markLabel-first');
markers[markers.length - 1].classList.add('MuiSlider-markLabel-last');
markers[i].classList.remove('MuiSlider-markLabel-overlap');
}
var middleIndices = markers.length % 2 === 0 ? [markers.length / 2, markers.length / 2 + 1] : [Math.floor(markers.length / 2)];
var lastVisibleInFirstHalf = 0;
var firstVisibleInSecondHalf = markers.length - 1;

// Check first half
for (var prevIdx = 0, currIdx = 1; currIdx < markers.length / 2; currIdx++) {
// if there is a collision, set classname and test with the next pips
if (checkOverlap(markers[prevIdx], markers[currIdx], null)) {
markers[currIdx].classList.add('MuiSlider-markLabel-overlap');
} else {
// if there is no collision and reset the startIdx to be the one before the fwdIdx
prevIdx = currIdx - prevIdx !== 1 ? currIdx : prevIdx + 1;
lastVisibleInFirstHalf = currIdx;
}
}

// Check second half
for (var nextIdx = markers.length - 1, _currIdx = markers.length - 2; _currIdx > markers.length / 2; _currIdx--) {
if (checkOverlap(null, markers[_currIdx], markers[nextIdx])) {
markers[_currIdx].classList.add('MuiSlider-markLabel-overlap');
} else {
// if there is no collision and reset the curIndex to be the one before the testIndex
nextIdx = nextIdx - _currIdx !== 1 ? _currIdx : nextIdx - 1;
firstVisibleInSecondHalf = _currIdx;
}
}
middleIndices.push(lastVisibleInFirstHalf, firstVisibleInSecondHalf);
middleIndices = _toConsumableArray(new Set(middleIndices)).sort(function (a, b) {
return a - b;
});

// Check middle elements
for (var testIdx = 0, _currIdx2 = 1; _currIdx2 < middleIndices.length; _currIdx2++) {
if (checkOverlap(markers[middleIndices[testIdx]], markers[middleIndices[_currIdx2]], _currIdx2 === middleIndices.length - 1 ? null : markers[middleIndices[_currIdx2 + 1]])) {
markers[middleIndices[_currIdx2]].classList.add('MuiSlider-markLabel-overlap');
} else {
testIdx = _currIdx2 - testIdx !== 1 ? _currIdx2 : testIdx + 1;
}
}
};
(0,external_cgpv_react_.useLayoutEffect)(function () {
// remove overlaping labels
removeLabelOverlap('xAxisSlider');
window.addEventListener('resize', function () {
return removeLabelOverlap;
});
return function () {
return window.removeEventListener('resize', function () {
return removeLabelOverlap;
});
};
}, [removeLabelOverlap]);

/**
* Renders the X Chart Slider JSX.Element or an empty box
* @returns The X Chart Slider JSX.Element or an empty box
Expand All @@ -47888,17 +48036,30 @@ function GeoChart(props) {
if (inputs && selectedDatasource) {
var _inputs$ui2;
if (inputs.chart === 'line' && (_inputs$ui2 = inputs.ui) !== null && _inputs$ui2 !== void 0 && (_inputs$ui2 = _inputs$ui2.xSlider) !== null && _inputs$ui2 !== void 0 && _inputs$ui2.display) {
return /*#__PURE__*/(0,jsx_runtime.jsx)(Box, {
return /*#__PURE__*/(0,jsx_runtime.jsxs)(Box, {
id: "xAxisSlider",
sx: sxClasses.xSliderWrapper,
children: /*#__PURE__*/(0,jsx_runtime.jsx)(Slider, {
children: [/*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
style: {
height: '16px'
},
children: [Array.isArray(xSliderValues) && xSliderValues[0] !== xSliderMin && /*#__PURE__*/(0,jsx_runtime.jsx)("span", {
className: "markLabel-first",
children: handleSliderXValueDisplay(xSliderMin)
}), Array.isArray(xSliderValues) && xSliderValues[xSliderValues.length - 1] !== xSliderMax && /*#__PURE__*/(0,jsx_runtime.jsx)("span", {
className: "markLabel-last",
children: handleSliderXValueDisplay(xSliderMax)
})]
}), /*#__PURE__*/(0,jsx_runtime.jsx)(Slider, {
marks: getMarkers(xSliderValues, handleSliderXValueDisplay),
min: xSliderMin,
max: xSliderMax,
step: xSliderSteps,
value: xSliderValues || 0,
onChangeCommitted: handleSliderXChange,
onValueDisplay: handleSliderXValueDisplay,
onValueDisplayAriaLabel: handleSliderXValueDisplay
})
})]
});
}
}
Expand All @@ -47916,9 +48077,19 @@ function GeoChart(props) {
if (inputs && selectedDatasource) {
var _inputs$ui3;
if (inputs.chart === 'line' && (_inputs$ui3 = inputs.ui) !== null && _inputs$ui3 !== void 0 && (_inputs$ui3 = _inputs$ui3.ySlider) !== null && _inputs$ui3 !== void 0 && _inputs$ui3.display) {
return /*#__PURE__*/(0,jsx_runtime.jsx)(Box, {
return /*#__PURE__*/(0,jsx_runtime.jsxs)(Box, {
sx: sxClasses.ySliderWrapper,
children: /*#__PURE__*/(0,jsx_runtime.jsx)(Slider, {
children: [/*#__PURE__*/(0,jsx_runtime.jsx)("div", {
style: {
height: '16px',
marginBottom: '10px'
},
children: Array.isArray(ySliderValues) && ySliderValues[ySliderValues.length - 1] !== ySliderMax && /*#__PURE__*/(0,jsx_runtime.jsx)("span", {
className: "markLabel-top",
children: handleSliderYValueDisplay(ySliderMax)
})
}), /*#__PURE__*/(0,jsx_runtime.jsx)(Slider, {
marks: getMarkers(ySliderValues, handleSliderYValueDisplay),
min: ySliderMin,
max: ySliderMax,
step: ySliderSteps,
Expand All @@ -47927,7 +48098,15 @@ function GeoChart(props) {
onChangeCommitted: handleSliderYChange,
onValueDisplay: handleSliderYValueDisplay,
onValueDisplayAriaLabel: handleSliderYValueDisplay
})
}), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
style: {
height: '16px'
},
children: Array.isArray(ySliderValues) && ySliderValues[0] !== ySliderMin && /*#__PURE__*/(0,jsx_runtime.jsx)("span", {
className: "markLabel-bottom",
children: handleSliderYValueDisplay(ySliderMin)
})
})]
});
}
}
Expand Down Expand Up @@ -48070,7 +48249,7 @@ function GeoChart(props) {
if (inputs && chartData && inputs.category) {
if (Object.keys(datasetRegistry).length > 1) {
var label = chartType === 'pie' || chartType === 'doughnut' ? "".concat(t('geochart.category'), ":") : '';
return /*#__PURE__*/(0,jsx_runtime.jsxs)(jsx_runtime.Fragment, {
return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
children: [/*#__PURE__*/(0,jsx_runtime.jsx)(Typography, {
sx: sxClasses.checkDatasetWrapperLabel,
children: label
Expand Down Expand Up @@ -48163,6 +48342,9 @@ function GeoChart(props) {
sx: chart_objectSpread(chart_objectSpread({}, sx), sxClasses.mainGeoChartContainer),
children: /*#__PURE__*/(0,jsx_runtime.jsxs)(Grid, {
container: true,
sx: {
m: '20px'
},
children: [/*#__PURE__*/(0,jsx_runtime.jsxs)(Grid, {
item: true,
xs: 12,
Expand Down

0 comments on commit 31ddd83

Please sign in to comment.