diff --git a/CHANGELOG.md b/CHANGELOG.md index 3dd0f94..ef01543 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,12 @@ # Changelog +## 1.16.x + +TimeSlider label +---------------- +Improvements made to the timeSlider timezone application and label positioning to remove artifacts +seen when not using browser-time or the 24 hour clock. + ## 1.16.4 SVG 'marker' element support diff --git a/package.json b/package.json index 6078157..70372bb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "flow", - "version": "1.16.4", + "version": "1.16.5", "description": "Svg flowchart visualization", "scripts": { "build": "webpack -c ./webpack.config.ts --env production", diff --git a/src/components/TimeSlider.tsx b/src/components/TimeSlider.tsx index b660c8f..13f4532 100644 --- a/src/components/TimeSlider.tsx +++ b/src/components/TimeSlider.tsx @@ -26,7 +26,7 @@ export const TimeSliderFactory = (props: TimeSliderProps) => { const range = 1000; const setLabel = props.setLabel; const labelWidth = 170; - const animControlWidth = props.animControl ? 20 : 0; + const animControlWidth = props.animControl ? 35 : 0; const sliderWidth = props.windowWidth - labelWidth - animControlWidth; // Resync value export when disabled @@ -44,7 +44,7 @@ export const TimeSliderFactory = (props: TimeSliderProps) => { const sliderScalar = event.target.value / range; const time = sliderTime(props.tsData, sliderScalar); props.timeSliderScalarRef.current = sliderScalar; - props.setLabel(formatter(time).text); + props.setLabel(formatter(time, 0, 0, props.timeZone).text); } return ( @@ -53,6 +53,7 @@ export const TimeSliderFactory = (props: TimeSliderProps) => { props.styles.wrapper, css` text-align: left; + white-space: nowrap; display: flex; gap: 5px; `