manual linting

Author: pleek91

.eslintrc.json

@@ -22,6 +22,16 @@
     }
   },
   "rules": {
-    "import/no-default-export": "error"
+    "import/no-default-export": "error",
+    "id-length": [
+      "warn",
+      {
+        "exceptions": [
+          "x",
+          "y",
+          "i"
+        ]
+      }
+    ]
   }
 }

.vscode/settings.json

@@ -24,9 +24,12 @@
     "composables",
     "datetime",
     "emperical",
+    "esbuild",
     "idempotency",
     "pinia",
     "prefecthq",
-    "vite"
+    "scripthost",
+    "vite",
+    "vitejs"
   ]
 }

src/BarChart.vue

@@ -1,7 +1,7 @@
 <template>
   <div ref="container" class="bar-chart">
     <template v-if="_items.length">
-      <svg :id="id" ref="chart" class="bar-chart__svg">
+      <svg :id="id" class="bar-chart__svg">
         <!-- -->
       </svg>
 
@@ -42,7 +42,7 @@
   const props = defineProps<{
     intervalStart: Date,
     intervalEnd: Date,
-    items: BarChartItem<any>[],
+    items: BarChartItem[],
     chartPadding?: {
       top?: number,
       bottom?: number,

src/Base.ts

@@ -42,21 +42,21 @@ export interface IBaseOptions {
   },
 }
 
+// typescript says crypto will be defined but it might not be
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
 if (crypto && !('randomUUID' in crypto)) {
   crypto.randomUUID = () => (+[1e7] + -1e3 + -4e3 + -8e3 + -1e11)
     .toString()
     .replace(/[018]/g,
-      c => (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16),
+      substring => (+substring ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +substring / 4).toString(16),
     )
 }
 
 // Starting these with "chart-" allows us to use UUIDs as HTMLElement ids
-const _uid = () => `chart-${crypto.randomUUID()}`
+const _uid = (): string => `chart-${crypto.randomUUID()}`
 
 
 export class Base implements IBase {
-  private readonly container: ElementRef
-  private resizeObserver: ResizeObserver | undefined
 
   public id: string = _uid()
 
@@ -71,8 +71,11 @@ export class Base implements IBase {
     right: 0,
   }
 
-  constructor(container: ElementRef, options?: IBaseOptions) {
-    if (!container) {
+  private readonly container: ElementRef
+  private resizeObserver: ResizeObserver | undefined
+
+  public constructor(container: ElementRef, options?: IBaseOptions) {
+    if (container.value === undefined) {
       throw new Error('Error initializing chart; must pass valid reference to element.')
     }
 
@@ -87,6 +90,14 @@ export class Base implements IBase {
     }
   }
 
+  public get paddingY(): number {
+    return this.padding.top + this.padding.middle + this.padding.bottom
+  }
+
+  public get paddingX(): number {
+    return this.padding.left + this.padding.right
+  }
+
   public initializeChart(): void {
     if (this.container.value) {
       this.resizeObserver = new ResizeObserver(this._onResize.bind(this))
@@ -101,15 +112,7 @@ export class Base implements IBase {
     }
   }
 
-  public get paddingY(): number {
-    return this.padding.top + this.padding.middle + this.padding.bottom
-  }
-
-  public get paddingX(): number {
-    return this.padding.left + this.padding.right
-  }
-
-  public onResize(): void { }
+  public onResize(): void { /* silence? */ }
   private _onResize(): void {
     if (!this.container.value) {
       return
@@ -122,7 +125,7 @@ export class Base implements IBase {
   }
 }
 
-const useBaseChart = (container: ElementRef, options?: IBaseOptions): Base => {
+export const useBaseChart = (container: ElementRef, options?: IBaseOptions): Base => {
   const base = new Base(container, options)
 
   onMounted(() => {
@@ -136,7 +139,4 @@ const useBaseChart = (container: ElementRef, options?: IBaseOptions): Base => {
   })
 
   return base
-}
-
-export default useBaseChart
-export { useBaseChart }
+}

src/DivergingBarChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="container" class="diverging-bar-chart">
-    <svg :id="id" ref="chart" class="diverging-bar-chart__svg">
+    <svg :id="id" class="diverging-bar-chart__svg">
       <g class="diverging-bar-chart__axis-group" />
     </svg>
 
@@ -11,9 +11,9 @@
       </div>
 
       <div class="diverging-bar-chart__series-container">
-        <template v-for="[key, series] in seriesMap" :key="key">
-          <div class="diverging-bar-chart__series" :style="calculateSeriesPosition(series.data)">
-            <template v-for="seriesPoint in series.series" :key="seriesPoint.key">
+        <template v-for="[key, seriesItem] in seriesMap" :key="key">
+          <div class="diverging-bar-chart__series" :style="calculateSeriesPosition(seriesItem.data)">
+            <template v-for="seriesPoint in seriesItem.series" :key="seriesPoint.key">
               <div
                 class="diverging-bar-chart__series-point"
                 :style="calculateSeriesPointPosition(seriesPoint.value)"
@@ -22,7 +22,7 @@
                   v-if="slots.default"
                   :key="seriesPoint.key"
                   :value="seriesPoint.value.data[seriesPoint.key]"
-                  :series="series"
+                  :series="seriesItem"
                 />
                 <div v-else class="diverging-bar-chart__series-bar" />
               </div>
@@ -44,7 +44,7 @@
 
 <script lang="ts" setup>
   import * as d3 from 'd3'
-  import { computed, ref, onMounted, useSlots, watchEffect } from 'vue'
+  import { computed, ref, onMounted, useSlots, watchEffect, StyleValue } from 'vue'
   import { useBaseChart } from './Base'
   import { DivergingBarChartItem, DivergingBarChartSeriesPoint, DivergingBarChartSeries, GroupSelection, TransitionSelection } from './types'
   import { formatLabel } from '@/utils/formatLabel'
@@ -54,8 +54,7 @@
   const props = defineProps<{
     intervalStart: Date,
     intervalEnd: Date,
-    intervalSeconds: number,
-    items: DivergingBarChartItem<any>[],
+    items: DivergingBarChartItem[],
     staticMedian?: boolean,
     showAxis?: boolean,
     axisClass?: string,
@@ -103,10 +102,10 @@
   })
 
   const xAxis = (
-    g: GroupSelection,
-  ): GroupSelection | TransitionSelection => g
+    group: GroupSelection,
+  ): GroupSelection | TransitionSelection => group
     .attr('class', () => {
-      const existingClasses = g.attr('class').split(' ') ?? []
+      const existingClasses = group.attr('class').split(' ')
       const propClasses = props.axisClass?.split(' ') ?? []
       const classes = [...existingClasses, ...propClasses.filter(pc => !existingClasses.includes(pc))]
       return classes.join(' ')
@@ -120,8 +119,8 @@
         .tickSizeInner(0)
         .tickSizeOuter(0),
     )
-    .call((g) => g.select('.domain').remove())
-    .call((g) => g.selectAll('.tick').style('opacity', 1))
+    .call((group) => group.select('.domain').remove())
+    .call((group) => group.selectAll('.tick').style('opacity', 1))
 
 
   const series = computed<DivergingBarChartSeries[]>(() => {
@@ -141,16 +140,16 @@
 
   const seriesMap = computed<Map<Date, { data: DivergingBarChartItem, series: { key: string, value: DivergingBarChartSeriesPoint }[] }>>(() => {
     const itemsMap = props.items.map<[Date, { data: DivergingBarChartItem, series: { key: string, value: DivergingBarChartSeriesPoint }[] }]>((item, i) => {
-      const seriesMap = series.value.map(s => {
-        return { key: s.key, value: s[i] }
+      const seriesMap = series.value.map(series => {
+        return { key: series.key, value: series[i] }
       })
       return [item.intervalStart, { data: item, series: seriesMap }]
     })
 
     return new Map(itemsMap)
   })
 
-  const calculateSeriesPosition = (item: DivergingBarChartItem) => {
+  const calculateSeriesPosition = (item: DivergingBarChartItem): StyleValue => {
     const start = xScale.value(item.intervalStart)
     const end = xScale.value(item.intervalEnd)
     return {
@@ -159,7 +158,7 @@
     }
   }
 
-  const calculateSeriesPointPosition = (point: DivergingBarChartSeriesPoint) => {
+  const calculateSeriesPointPosition = (point: DivergingBarChartSeriesPoint): StyleValue => {
     const offset = baseChart.padding.middle / 2
     let start = yScale.value(point[0])
     let end = yScale.value(point[1])

src/ScatterPlot.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="container" class="scatter-plot">
-    <svg :id="id" ref="chart" class="scatter-plot__svg">
+    <svg :id="id" class="scatter-plot__svg">
       <g class="scatter-plot__x-axis-group" />
       <g class="scatter-plot__y-axis-group" />
     </svg>
@@ -20,16 +20,16 @@
 <script lang="ts" setup>
   import * as d3 from 'd3'
   import { NumberValue } from 'd3'
-  import { ref, computed, onMounted, watch, CSSProperties } from 'vue'
+  import { ref, computed, onMounted, watch, CSSProperties, withDefaults } from 'vue'
   import { useBaseChart } from './Base'
   import { GroupSelection, TransitionSelection, ScatterPlotItem } from './types'
   import { extentUndefined } from './utils/extent'
-  import formatLabel from './utils/formatLabel'
+  import { formatLabel } from './utils/formatLabel'
 
   const props = withDefaults(defineProps<{
     items: ScatterPlotItem[],
-    startDate?: Date,
-    endDate?: Date,
+    startDate?: Date | null,
+    endDate?: Date | null,
     showNowLine?: boolean,
     dotDiameter?: number,
     chartPadding?: {
@@ -38,15 +38,15 @@
       left?: number,
       right?: number,
     },
-  }>(),
-                             {
-                               dotDiameter: 14,
-                               chartPadding: () => {
-                                 return { top: 30, left: 70, bottom: 50, right: 20 }
-                               },
+  }>(), {
+    startDate: null,
+    endDate: null,
+    dotDiameter: 14,
+    chartPadding: () => {
+      return { top: 30, left: 70, bottom: 50, right: 20 }
+    },
 
-                             },
-  )
+  })
 
   const container = ref<HTMLElement>()
   const xScale = ref(d3.scaleTime())
@@ -73,7 +73,7 @@
     return Math.max(ticks, 1)
   })
 
-  const xAxis = (g: GroupSelection): GroupSelection | TransitionSelection => g
+  const xAxis = (group: GroupSelection): GroupSelection | TransitionSelection => group
     .call(d3.axisBottom(xScale.value)
       .tickPadding(10)
       .tickSizeInner(5)
@@ -87,7 +87,7 @@
 
   const formatYAxis = (value: NumberValue): string => {
     if (typeof value !== 'number') {
-      return `${value}`
+      return `${value.valueOf()}`
     }
 
     const formatter = d3.format('.0f')
@@ -100,16 +100,16 @@
     return `${formatter(value)}s`
   }
 
-  const yAxis = (g: GroupSelection): GroupSelection | TransitionSelection => g
+  const yAxis = (group: GroupSelection): GroupSelection | TransitionSelection => group
     .call(d3.axisLeft(yScale.value)
       .tickPadding(10)
       .tickSizeInner(-(baseChart.width.value - baseChart.paddingX))
-      .tickFormat(d => formatYAxis(d))
+      .tickFormat(domain => formatYAxis(domain))
       .tickValues(yScale.value.ticks()),
     )
 
-  const xAccessor = (d: ScatterPlotItem) => d.x
-  const yAccessor = (d: ScatterPlotItem) => d.y
+  const xAccessor = (item: ScatterPlotItem): Date => item.x
+  const yAccessor = (item: ScatterPlotItem): number => item.y
 
   const calculateDotPosition = (item: ScatterPlotItem): CSSProperties => {
     const top = yScale.value(item.y) + baseChart.padding.top - props.dotDiameter / 2