HdSalesGraph.vue

<template>
  <b-card>

    <header slot="header">
      <h3 class="m-0">
        <i class="fa fa-fw fa-area-chart" /> HD Orders:
        <span class="font-weight-normal">
          <slot name="title"></slot>
        </span>
      </h3>
    </header>

    <hd-line-chart v-bind="{ styles, chartData }" />

  </b-card>
</template>

<script lang="ts">
import Vue from "vue";
import HdLineChart from "@components/Charts/HdLineChart.vue";
import moment from "moment";
import Order from "@classes/Order";
import { roundTo, parse_int } from "@core/utils";
import { Option } from "safe-types";
import { MDColor } from "@core/md-colors";

export default Vue.extend({
  name: "HdSalesGraph",

  components: { HdLineChart },

  props: {
    currentData: {
      type: Array,
      default(): any[] {
        return [];
      },
    },

    previousData: {
      type: Array,
      default(): any[] {
        return [];
      },
    },

    currentMoment: {
      type: Object,
      required: true,
      validator(val: any): val is moment.Moment {
        return moment.isMoment(val);
      },
    },

    previousMoment: {
      type: Object,
      required: true,
      validator(val: any): val is moment.Moment {
        return moment.isMoment(val);
      },
    },
  },

  data() {
    return {
      styles: {
        width: "100%",
        height: "500px",
        position: "relative",
      },
    };
  },

  computed: {
    curMoment(): moment.Moment {
      return moment(this.currentMoment);
    },

    prevMoment(): moment.Moment {
      return moment(this.previousMoment);
    },

    labels(): number[] {
      return Array.from(
        { length: this.curMoment.daysInMonth() },
        (_, i) => i + 1
      );
    },

    chartData(): { labels: number[]; datasets: any[] } {
      return this.process(this.currentData, this.previousData);
    },
  },

  methods: {
    formatDailySales(orders: Order[]) {
      // Captures the `DD` in a `YYYY-MM-DD HH:mm:ss` formatted string
      const date_regex = /^[\d]{4}-[\d]{2}-([\d]{2}) [\d]{2}:[\d]{2}:[\d]{2}$/;
      const ordersByDate = orders.reduce(
        (ordersByDay, o) => {
          Option.of(date_regex.exec(o.created_at))
            .and_then(([, d]) => parse_int(d))
            .map(day => {
              if (!ordersByDay[day]) {
                ordersByDay[day] = [];
              }
              ordersByDay[day].push(o);
            });

          return ordersByDay;
        },
        <{ [day: number]: Order[] }>{}
      );

      return this.labels.map(i =>
        Option.of(ordersByDate[i + 1]).map_or(0, orders =>
          orders.reduce((t, o) => roundTo(t + o.total, 2), 0)
        )
      );
    },
    process(
      current: Order[],
      previous: Order[]
    ): { labels: number[]; datasets: any[] } {
      const [curOrders, prevOrders] = [current, previous].map(
        this.formatDailySales
      );

      return {
        labels: this.labels,
        datasets: [
          {
            label: `${moment.months(
              this.curMoment.month()
            )} ${this.curMoment.year()}`,
            backgroundColor: `rgba(${MDColor.lightBlue["600"].rgb.join(
              ","
            )}, .5)`,
            data: curOrders,
          },
          {
            label: `${moment.months(
              this.prevMoment.month()
            )} ${this.prevMoment.year()}`,
            backgroundColor: `rgba(${MDColor.red["600"].rgb.join(",")}, .5)`,
            data: prevOrders,
          },
        ],
      };
    },
  },
});
</script>

<shell>
    ERROR in /Users/alex/dev/projects/artisanhd-v2/src/js/components/Manage/DataViz/HdSalesGraph.vue.ts
    [tsl] ERROR in /Users/alex/dev/projects/artisanhd-v2/src/js/components/Manage/DataViz/HdSalesGraph.vue.ts(77,26)
          TS2339: Property 'currentMoment' does not exist on type 'CombinedVueInstance<Vue, { styles: { width: string; height: string; position: string; }; }, { for...'.

    ERROR in /Users/alex/dev/projects/artisanhd-v2/src/js/components/Manage/DataViz/HdSalesGraph.vue.ts
    [tsl] ERROR in /Users/alex/dev/projects/artisanhd-v2/src/js/components/Manage/DataViz/HdSalesGraph.vue.ts(81,26)
          TS2339: Property 'previousMoment' does not exist on type 'CombinedVueInstance<Vue, { styles: { width: string; height: string; position: string; }; }, { for...'.

    ERROR in /Users/alex/dev/projects/artisanhd-v2/src/js/components/Manage/DataViz/HdSalesGraph.vue.ts
    [tsl] ERROR in /Users/alex/dev/projects/artisanhd-v2/src/js/components/Manage/DataViz/HdSalesGraph.vue.ts(92,32)
          TS2339: Property 'currentData' does not exist on type 'CombinedVueInstance<Vue, { styles: { width: string; height: string; position: string; }; }, { for...'.

    ERROR in /Users/alex/dev/projects/artisanhd-v2/src/js/components/Manage/DataViz/HdSalesGraph.vue.ts
    [tsl] ERROR in /Users/alex/dev/projects/artisanhd-v2/src/js/components/Manage/DataViz/HdSalesGraph.vue.ts(92,50)
          TS2339: Property 'previousData' does not exist on type 'CombinedVueInstance<Vue, { styles: { width: string; height: string; position: string; }; }, { for...'.
</shell>