From 7e816b93951203b0285f07e95e0a0de4e63682c2 Mon Sep 17 00:00:00 2001
From: Craig Harshbarger <pleek91@gmail.com>
Date: Tue, 24 May 2022 14:57:34 -0500
Subject: [PATCH 1/3] Some tweaks to get the scatter plot looking better for
 tailwind redesign

---
 src/components/ScatterPlot.vue | 68 ++++++++++++++++------------------
 src/types.ts                   |  3 ++
 src/utilities/formatTime.ts    | 21 ++++++++++-
 src/utilities/time.ts          |  2 -
 4 files changed, 54 insertions(+), 40 deletions(-)

diff --git a/src/components/ScatterPlot.vue b/src/components/ScatterPlot.vue
index 984b287..6024be1 100644
--- a/src/components/ScatterPlot.vue
+++ b/src/components/ScatterPlot.vue
@@ -19,12 +19,12 @@
 
 <script lang="ts" setup>
   import * as d3 from 'd3'
-  import { NumberValue } from 'd3'
   import { ref, computed, onMounted, watch, CSSProperties, withDefaults } from 'vue'
   import { useBaseChart } from './Base'
   import { GroupSelection, TransitionSelection, ScatterPlotItem } from '@/types'
   import { extentUndefined } from '@/utilities/extent'
   import { formatLabel } from '@/utilities/formatLabel'
+  import { formatTime } from '@/utilities/formatTime'
 
   const props = withDefaults(defineProps<{
     items: ScatterPlotItem[],
@@ -43,14 +43,13 @@
     endDate: null,
     dotDiameter: 14,
     chartPadding: () => {
-      return { top: 30, left: 70, bottom: 50, right: 20 }
+      return { top: 16, left: 74, bottom: 48, right: 16 }
     },
-
   })
 
   const container = ref<HTMLElement>()
   const xScale = ref(d3.scaleTime())
-  const yScale = ref(d3.scaleLog())
+  const yScale = ref(d3.scaleLinear())
 
   const items = computed(() => props.items)
 
@@ -69,8 +68,13 @@
     if (!props.items.length) {
       return 5
     }
-    const ticks = Math.floor(props.items.length * ((baseChart.width.value - baseChart.paddingX) / (props.items.length * 150)))
-    return Math.max(ticks, 1)
+
+    const tickWidth = 100
+    const ticks = (baseChart.width.value - baseChart.paddingX) / tickWidth
+
+    // const ticks = Math.floor(props.items.length * ((baseChart.width.value - baseChart.paddingX) / (props.items.length * 150)))
+
+    return Math.max(2, Math.ceil(ticks))
   })
 
   const xAxis = (groupSelection: GroupSelection): GroupSelection | TransitionSelection => groupSelection
@@ -85,26 +89,11 @@
   // yAXIS
   let yAxisGroup: GroupSelection | undefined
 
-  const formatYAxis = (value: NumberValue): string => {
-    if (typeof value !== 'number') {
-      return `${value.valueOf()}`
-    }
-
-    const formatter = d3.format('.0f')
-    const decimalFormat = d3.format('.2f')
-
-    if (value < 1) {
-      return `${decimalFormat(value)}s`
-    }
-
-    return `${formatter(value)}s`
-  }
-
   const yAxis = (groupSelection: GroupSelection): GroupSelection | TransitionSelection => groupSelection
     .call(d3.axisLeft(yScale.value)
       .tickPadding(10)
       .tickSizeInner(-(baseChart.width.value - baseChart.paddingX))
-      .tickFormat(domain => formatYAxis(domain))
+      .tickFormat(formatTime)
       .tickValues(yScale.value.ticks()),
     )
 
@@ -165,23 +154,20 @@
 
     if (xAxisGroup) {
       xAxisGroup.call(xAxis)
-      xAxisGroup
-        .attr('transform', `translate(${props.dotDiameter}, ${baseChart.height.value - baseChart.padding.bottom + props.dotDiameter})`)
-        .attr('font-family', 'input-sans')
-        .attr('font-size', '11')
-      xAxisGroup.select('.domain').style('opacity', '0')
+      xAxisGroup.attr('transform', `translate(${props.dotDiameter}, ${baseChart.height.value - baseChart.padding.bottom + props.dotDiameter})`)
 
+      xAxisGroup.selectAll('.tick text').attr('class', 'scatter-plot__tick-label scatter-plot__tick-label--x')
+      xAxisGroup.select('.domain').remove()
     }
 
     if (yAxisGroup) {
       yAxisGroup.call(yAxis)
       yAxisGroup
         .attr('transform', `translate(${baseChart.padding.left}, ${baseChart.padding.top})`)
-        .attr('font-family', 'input-sans')
-        .attr('font-size', '11')
 
-      yAxisGroup.selectAll('.tick line').style('stroke', '#cacccf')
-      yAxisGroup.select('.domain').style('opacity', 0)
+      yAxisGroup.selectAll('.tick text').attr('class', 'scatter-plot__tick-label scatter-plot__tick-label--y')
+      yAxisGroup.selectAll('.tick line').attr('class', 'scatter-plot__tick-line')
+      yAxisGroup.select('.domain').remove()
     }
   }
 
@@ -198,22 +184,21 @@
     let extentY = d3.extent(items.value, yAccessor)
 
     if (extentUndefined(extentY)) {
-      extentY = [0.1, 20]
+      extentY = [0, 20]
     }
 
-    extentY[0] = extentY[0] * 0.95
-    extentY[1] = extentY[1] * 1.05
+    extentY[0] = 0
+    extentY[1] = extentY[1] * 1.1
 
     if (extentY.every(extent => extent === 0)) {
-      extentY = [0.1, 20]
+      extentY = [0, 20]
     }
 
     yScale.value = d3
-      .scaleLog()
+      .scaleLinear()
       .domain(extentY)
       .range([baseChart.height.value - baseChart.paddingY, 0])
       .clamp(true)
-      .base(2)
   }
 
   onMounted(() => {
@@ -288,4 +273,13 @@
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 2;
 }
+
+.scatter-plot__tick-line {
+  stroke: #cacccf
+}
+
+.scatter-plot__tick-label {
+  color: rgb(107 114 128);
+  font-size: 12px;
+}
 </style>
\ No newline at end of file
diff --git a/src/types.ts b/src/types.ts
index eb6afb7..ae33a5e 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,4 +1,5 @@
 import * as d3 from 'd3'
+import { AxisDomain } from 'd3'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type BarChartItem<T = any> = {
@@ -43,3 +44,5 @@ export type ScatterPlotItem = {
 export type ChartProps = {
   items: ScatterPlotItem[],
 }
+
+export type AxisDomainFormatMethod = (date: AxisDomain) => string
diff --git a/src/utilities/formatTime.ts b/src/utilities/formatTime.ts
index 380a459..4c432e9 100644
--- a/src/utilities/formatTime.ts
+++ b/src/utilities/formatTime.ts
@@ -1,4 +1,4 @@
-import { timeFormat } from 'd3'
+import { AxisDomain, timeFormat, format } from 'd3'
 
 const formatMillisecond = timeFormat('.%L')
 const formatSecond = timeFormat(':%S')
@@ -9,6 +9,25 @@ const formatWeek = timeFormat('%b %d')
 const formatMonth = timeFormat('%B')
 const formatYear = timeFormat('%Y')
 
+export const formatTime = (value: AxisDomain): string => {
+  if (typeof value !== 'number') {
+    return `${value.valueOf()}`
+  }
+
+  const formatter = format('.0f')
+  const decimalFormat = format('.2f')
+
+  if (value === 0) {
+    return '0s'
+  }
+
+  if (value < 1) {
+    return `${decimalFormat(value)}s`
+  }
+
+  return `${formatter(value)}s`
+}
+
 export {
   formatMillisecond,
   formatSecond,
diff --git a/src/utilities/time.ts b/src/utilities/time.ts
index ec6549e..573b338 100644
--- a/src/utilities/time.ts
+++ b/src/utilities/time.ts
@@ -161,8 +161,6 @@ const getMinInterval = (start: Date, end: Date, min: number = 5): TimeIntervalKe
     _temp = getNextLowestInterval(_t)
   }
 
-  console.log(start.toLocaleTimeString(), end.toLocaleTimeString(), _temp)
-
   return _temp
 }
 

From 5a14e2088ffd1cfb089a5f7eee1e99ead5433f6e Mon Sep 17 00:00:00 2001
From: pleek91 <craig@prefect.io>
Date: Tue, 24 May 2022 15:04:17 -0500
Subject: [PATCH 2/3] Update src/components/ScatterPlot.vue

Co-authored-by: Nicholas Brown <nicholas@prefect.io>
---
 src/components/ScatterPlot.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ScatterPlot.vue b/src/components/ScatterPlot.vue
index 6024be1..bc08a3d 100644
--- a/src/components/ScatterPlot.vue
+++ b/src/components/ScatterPlot.vue
@@ -72,7 +72,6 @@
     const tickWidth = 100
     const ticks = (baseChart.width.value - baseChart.paddingX) / tickWidth
 
-    // const ticks = Math.floor(props.items.length * ((baseChart.width.value - baseChart.paddingX) / (props.items.length * 150)))
 
     return Math.max(2, Math.ceil(ticks))
   })

From dc0907522a539c5ccffb098a14ed720de2cf279b Mon Sep 17 00:00:00 2001
From: Craig Harshbarger <pleek91@gmail.com>
Date: Tue, 24 May 2022 15:04:54 -0500
Subject: [PATCH 3/3] Remove early exit

---
 src/components/ScatterPlot.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/components/ScatterPlot.vue b/src/components/ScatterPlot.vue
index bc08a3d..e24ccac 100644
--- a/src/components/ScatterPlot.vue
+++ b/src/components/ScatterPlot.vue
@@ -65,14 +65,9 @@
   let xAxisGroup: GroupSelection | undefined
 
   const xTicks = computed(() => {
-    if (!props.items.length) {
-      return 5
-    }
-
     const tickWidth = 100
     const ticks = (baseChart.width.value - baseChart.paddingX) / tickWidth
 
-
     return Math.max(2, Math.ceil(ticks))
   })