Merge pull request #110 from andymchugh/sliderwidth

slider label
andymchugh · Sep 11, 2024 · 40a62e0 · 40a62e0
2 parents 6eeaeaf + 0f11018
commit 40a62e0
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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;
         `