Skip to content

Instantly share code, notes, and snippets.

@alexsasharegan
Last active April 4, 2018 17:23
Show Gist options
  • Save alexsasharegan/a2255b9abd621aac405e73b2be8900d8 to your computer and use it in GitHub Desktop.
Save alexsasharegan/a2255b9abd621aac405e73b2be8900d8 to your computer and use it in GitHub Desktop.
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment