@dimailn/vuetify 2.7.2-alpha0

package/src/components/VSparkline/VSparkline.ts

@@ -0,0 +1,422 @@
+import {h} from 'vue'
+// Mixins
+import Colorable from '../../mixins/colorable'
+
+// Utilities
+import mixins, { ExtractVue } from '../../util/mixins'
+import { genPoints, genBars } from './helpers/core'
+import { genPath } from './helpers/path'
+
+// Types
+import Vue, { VNode } from 'vue'
+import { Prop, PropValidator } from 'vue/types/options'
+
+export type SparklineItem = number | { value: number }
+
+export type SparklineText = {
+  x: number
+  value: string
+}
+
+export interface Boundary {
+  minX: number
+  minY: number
+  maxX: number
+  maxY: number
+}
+
+export interface Point {
+  x: number
+  y: number
+  value: number
+}
+
+export interface Bar {
+  x: number
+  y: number
+  height: number
+  value: number
+}
+
+interface options extends Vue {
+  $refs: {
+    path: SVGPathElement
+  }
+}
+
+export default mixins<options &
+/* eslint-disable indent */
+  ExtractVue<[
+    typeof Colorable
+  ]>
+/* eslint-enable indent */
+>(
+  Colorable
+).extend({
+  name: 'VSparkline',
+
+  inheritAttrs: false,
+
+  props: {
+    autoDraw: Boolean,
+    autoDrawDuration: {
+      type: Number,
+      default: 2000,
+    },
+    autoDrawEasing: {
+      type: String,
+      default: 'ease',
+    },
+    autoLineWidth: {
+      type: Boolean,
+      default: false,
+    },
+    color: {
+      type: String,
+      default: 'primary',
+    },
+    fill: {
+      type: Boolean,
+      default: false,
+    },
+    gradient: {
+      type: Array,
+      default: () => ([]),
+    } as PropValidator<string[]>,
+    gradientDirection: {
+      type: String as Prop<'top' | 'bottom' | 'left' | 'right'>,
+      validator: (val: string) => ['top', 'bottom', 'left', 'right'].includes(val),
+      default: 'top',
+    },
+    height: {
+      type: [String, Number],
+      default: 75,
+    },
+    labels: {
+      type: Array,
+      default: () => ([]),
+    } as PropValidator<SparklineItem[]>,
+    labelSize: {
+      type: [Number, String],
+      default: 7,
+    },
+    lineWidth: {
+      type: [String, Number],
+      default: 4,
+    },
+    padding: {
+      type: [String, Number],
+      default: 8,
+    },
+    showLabels: Boolean,
+    smooth: {
+      type: [Boolean, Number, String],
+      default: false,
+    },
+    type: {
+      type: String as Prop<'trend' | 'bar'>,
+      default: 'trend',
+      validator: (val: string) => ['trend', 'bar'].includes(val),
+    },
+    value: {
+      type: Array,
+      default: () => ([]),
+    } as PropValidator<SparklineItem[]>,
+    width: {
+      type: [Number, String],
+      default: 300,
+    },
+  },
+
+  data: () => ({
+    lastLength: 0,
+  }),
+
+  computed: {
+    parsedPadding (): number {
+      return Number(this.padding)
+    },
+    parsedWidth (): number {
+      return Number(this.width)
+    },
+    parsedHeight (): number {
+      return parseInt(this.height, 10)
+    },
+    parsedLabelSize (): number {
+      return parseInt(this.labelSize, 10) || 7
+    },
+    totalHeight (): number {
+      let height = this.parsedHeight
+
+      if (this.hasLabels) height += parseInt(this.labelSize, 10) * 1.5
+
+      return height
+    },
+    totalWidth (): number {
+      let width = this.parsedWidth
+      if (this.type === 'bar') width = Math.max(this.value.length * this._lineWidth, width)
+
+      return width
+    },
+    totalValues (): number {
+      return this.value.length
+    },
+    _lineWidth (): number {
+      if (this.autoLineWidth && this.type !== 'trend') {
+        const totalPadding = this.parsedPadding * (this.totalValues + 1)
+        return (this.parsedWidth - totalPadding) / this.totalValues
+      } else {
+        return parseFloat(this.lineWidth) || 4
+      }
+    },
+    boundary (): Boundary {
+      if (this.type === 'bar') return { minX: 0, maxX: this.totalWidth, minY: 0, maxY: this.parsedHeight }
+
+      const padding = this.parsedPadding
+
+      return {
+        minX: padding,
+        maxX: this.totalWidth - padding,
+        minY: padding,
+        maxY: this.parsedHeight - padding,
+      }
+    },
+    hasLabels (): boolean {
+      return Boolean(
+        this.showLabels ||
+        this.labels.length > 0 ||
+        this.$slots.label
+      )
+    },
+    parsedLabels (): SparklineText[] {
+      const labels = []
+      const points = this._values
+      const len = points.length
+
+      for (let i = 0; labels.length < len; i++) {
+        const item = points[i]
+        let value = this.labels[i]
+
+        if (!value) {
+          value = typeof item === 'object'
+            ? item.value
+            : item
+        }
+
+        labels.push({
+          x: item.x,
+          value: String(value),
+        })
+      }
+
+      return labels
+    },
+    normalizedValues (): number[] {
+      return this.value.map(item => (typeof item === 'number' ? item : item.value))
+    },
+    _values (): Point[] | Bar[] {
+      return this.type === 'trend' ? genPoints(this.normalizedValues, this.boundary) : genBars(this.normalizedValues, this.boundary)
+    },
+    textY (): number {
+      let y = this.parsedHeight
+      if (this.type === 'trend') y -= 4
+      return y
+    },
+    _radius (): number {
+      return this.smooth === true ? 8 : Number(this.smooth)
+    },
+  },
+
+  watch: {
+    value: {
+      immediate: true,
+      handler () {
+        this.$nextTick(() => {
+          if (
+            !this.autoDraw ||
+            this.type === 'bar' ||
+            !this.$refs.path
+          ) return
+
+          const path = this.$refs.path
+          const length = path.getTotalLength()
+
+          if (!this.fill) {
+            path.style.transition = 'none'
+            path.style.strokeDasharray = length + ' ' + length
+            path.style.strokeDashoffset = Math.abs(length - (this.lastLength || 0)).toString()
+            path.getBoundingClientRect()
+            path.style.transition = `stroke-dashoffset ${this.autoDrawDuration}ms ${this.autoDrawEasing}`
+            path.style.strokeDashoffset = '0'
+          } else {
+            path.style.transformOrigin = 'bottom center'
+            path.style.transition = 'none'
+            path.style.transform = `scaleY(0)`
+            path.getBoundingClientRect()
+            path.style.transition = `transform ${this.autoDrawDuration}ms ${this.autoDrawEasing}`
+            path.style.transform = `scaleY(1)`
+          }
+          this.lastLength = length
+        })
+      },
+    },
+  },
+
+  methods: {
+    genGradient () {
+      const gradientDirection = this.gradientDirection
+      const gradient = this.gradient.slice()
+
+      // Pushes empty string to force
+      // a fallback to currentColor
+      if (!gradient.length) gradient.push('')
+
+      const len = Math.max(gradient.length - 1, 1)
+      const stops = gradient.reverse().map((color, index) =>
+        h('stop', {
+          attrs: {
+            offset: index / len,
+            'stop-color': color || 'currentColor',
+          },
+        })
+      )
+
+      return h('defs', [
+        h('linearGradient', {
+          attrs: {
+            id: this._uid,
+            gradientUnits: 'userSpaceOnUse',
+            x1: gradientDirection === 'left' ? '100%' : '0',
+            y1: gradientDirection === 'top' ? '100%' : '0',
+            x2: gradientDirection === 'right' ? '100%' : '0',
+            y2: gradientDirection === 'bottom' ? '100%' : '0',
+          },
+        }, stops),
+      ])
+    },
+    genG (children: VNode[]) {
+      return h('g', {
+        style: {
+          fontSize: '8',
+          textAnchor: 'middle',
+          dominantBaseline: 'mathematical',
+          fill: 'currentColor',
+        } as object, // TODO: TS 3.5 is too eager with the array type here
+      }, children)
+    },
+    genPath () {
+      const points = genPoints(this.normalizedValues, this.boundary)
+
+      return h('path', {
+        attrs: {
+          d: genPath(points, this._radius, this.fill, this.parsedHeight),
+          fill: this.fill ? `url(#${this._uid})` : 'none',
+          stroke: this.fill ? 'none' : `url(#${this._uid})`,
+        },
+        ref: 'path',
+      })
+    },
+    genLabels (offsetX: number) {
+      const children = this.parsedLabels.map((item, i) => (
+        h('text', {
+          attrs: {
+            x: item.x + offsetX + this._lineWidth / 2,
+            y: this.textY + (this.parsedLabelSize * 0.75),
+            'font-size': Number(this.labelSize) || 7,
+          },
+        }, [this.genLabel(item, i)])
+      ))
+
+      return this.genG(children)
+    },
+    genLabel (item: SparklineText, index: number) {
+      return this.$slots.label
+        ? this.$slots.label({ index, value: item.value })
+        : item.value
+    },
+    genBars () {
+      if (!this.value || this.totalValues < 2) return undefined as never
+
+      const bars = genBars(this.normalizedValues, this.boundary)
+      const offsetX = (Math.abs(bars[0].x - bars[1].x) - this._lineWidth) / 2
+
+      return h('svg', {
+        attrs: {
+          display: 'block',
+          viewBox: `0 0 ${this.totalWidth} ${this.totalHeight}`,
+        },
+      }, [
+        this.genGradient(),
+        this.genClipPath(bars, offsetX, this._lineWidth, 'sparkline-bar-' + this._uid),
+        this.hasLabels ? this.genLabels(offsetX) : undefined as never,
+        h('g', {
+          attrs: {
+            'clip-path': `url(#sparkline-bar-${this._uid}-clip)`,
+            fill: `url(#${this._uid})`,
+          },
+        }, [
+          h('rect', {
+            attrs: {
+              x: 0,
+              y: 0,
+              width: this.totalWidth,
+              height: this.height,
+            },
+          }),
+        ]),
+      ])
+    },
+    genClipPath (bars: Bar[], offsetX: number, lineWidth: number, id: string) {
+      const rounding = typeof this.smooth === 'number'
+        ? this.smooth
+        : this.smooth ? 2 : 0
+
+      return h('clipPath', {
+        attrs: {
+          id: `${id}-clip`,
+        },
+      }, bars.map(item => {
+        return h('rect', {
+          attrs: {
+            x: item.x + offsetX,
+            y: item.y,
+            width: lineWidth,
+            height: item.height,
+            rx: rounding,
+            ry: rounding,
+          },
+        }, [
+          this.autoDraw ? h('animate', {
+            attrs: {
+              attributeName: 'height',
+              from: 0,
+              to: item.height,
+              dur: `${this.autoDrawDuration}ms`,
+              fill: 'freeze',
+            },
+          }) : undefined as never,
+        ])
+      }))
+    },
+    genTrend () {
+      return h('svg', this.setTextColor(this.color, {
+        attrs: {
+          ...this.$attrs,
+          display: 'block',
+          'stroke-width': this._lineWidth || 1,
+          viewBox: `0 0 ${this.width} ${this.totalHeight}`,
+        },
+      }), [
+        this.genGradient(),
+        this.hasLabels && this.genLabels(-(this._lineWidth / 2)),
+        this.genPath(),
+      ])
+    },
+  },
+
+  render (): VNode {
+    if (this.totalValues < 2) return undefined as never
+
+    return this.type === 'trend' ? this.genTrend() : this.genBars()
+  },
+})

package/src/components/VSparkline/__tests__/VSparkline.spec.ts

@@ -0,0 +1,280 @@
+// Components
+import VSparkline from '../VSparkline'
+
+// Utilities
+import {
+  mount,
+  Wrapper,
+} from '@vue/test-utils'
+
+describe('VSparkline.ts', () => {
+  type Instance = InstanceType<typeof VSparkline>
+  let mountFunction: (options?: object) => Wrapper<Instance>
+
+  beforeEach(() => {
+    mountFunction = (options = {}) => {
+      return mount(VSparkline, {
+        ...options,
+      })
+    }
+  })
+
+  it('should render component and match a snapshot', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        value: [1, 7, 42],
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render component with padding and match a snapshot', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        value: [1, 7, 42],
+        padding: 20,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render smooth component and match a snapshot', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        value: [1, 7, 42],
+        smooth: 20,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render component with line width and match a snapshot', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        value: [1, 7, 42],
+        lineWidth: 42,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render component with gradient and match a snapshot', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        value: [1, 7, 42],
+        gradient: ['#000', 'red', 'rgba(80, 160, 240, 0.5)'],
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render component with string labels and match a snapshot', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        showLabels: true,
+        value: [1, 7, 42],
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    wrapper.setProps({
+      value: [
+        {
+          value: 2,
+        },
+        {
+          value: 8,
+        },
+        {
+          value: 43,
+        },
+      ],
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    wrapper.setProps({
+      labels: ['foo', 'bar', 'baz'],
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render component with bars and match a snapshot', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        value: [1, 7, 42],
+        type: 'bar',
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render component with bars and negative and match a snapshot', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        value: [-1, 1, 7, 42],
+        type: 'bar',
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render component with bars and gradient and match a snapshot', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        value: [1, 7, 42],
+        gradient: ['#000', 'red', 'rgba(80, 160, 240, 0.5)'],
+        type: 'bar',
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render component with bars and labels and match a snapshot', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        value: [1, 7, 42],
+        labels: ['Value 1', 'Value 2', 'Value 3'],
+        type: 'bar',
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render component with bars and auto-line-width and match a snapshot', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        value: [1, 7, 42],
+        type: 'bar',
+        autoLineWidth: true,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render component with bars and line width and match a snapshot', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        value: [1, 7, 42],
+        type: 'bar',
+        lineWidth: 8,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render component with bars and custom padding and match a snapshot', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        value: [1, 7, 42],
+        type: 'bar',
+        padding: 12,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render component with bars and auto-line-width with custom padding and match a snapshot', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        value: [1, 7, 42],
+        type: 'bar',
+        autoLineWidth: true,
+        padding: 12,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render component with bars and custom label size and match a snapshot', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        value: [1, 7, 42],
+        labels: ['Value 1', 'Value 2', 'Value 3'],
+        labelSize: 15,
+        type: 'bar',
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render component with trend and equal values and match a snapshot', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        value: [1, 1, 1],
+        type: 'trend',
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render component with label size and match a snapshot', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        value: [1, 7, 42],
+        showLabels: true,
+        labelSize: 14,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should position labels correctly', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        value: [1, 7, 42],
+        showLabels: true,
+        lineWidth: 20,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render component with bars and correct bar lengths', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        value: [1, 2],
+        type: 'bar',
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    wrapper.setProps({
+      value: [-1, -2],
+    })
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render bar component with all values 0', () => {
+    const wrapper = mountFunction({
+      propsData: {
+        value: [0, 0, 0],
+        type: 'bar',
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})