{"version":3,"file":"js/stacked-area-b60abbe52da967ae20b8.js","mappings":"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","sources":["webpack://app/./app/javascript/stacked-area/chart.vue","webpack://app/./app/javascript/stacked-area/color-scheme.js","webpack://app/./app/javascript/stacked-area/chart.vue?906e","webpack://app/./app/javascript/stacked-area/legend.vue","webpack://app/./app/javascript/stacked-area/legend.vue?b895","webpack://app/./app/javascript/packs/stacked-area.js"],"sourcesContent":["<template>\n  <div class=\"chart-container\">\n    <svg :viewBox=\"viewBox\">\n      <g class=\"transactions-chart\"></g>\n    </svg>\n  </div>\n</template>\n\n<script>\nimport * as d3 from 'd3'\nimport ColorScheme from './color-scheme'\n\nexport default {\n  name: 'stacked-area',\n  props: {\n    usages: { default: () => {} },\n    colors: { default: () => ColorScheme.colors() },\n    width: { default: 850 },\n    height: { default: 250 }\n  },\n  mounted() {\n    var parseDate = d3.timeParse(\"%x\");\n\n    var x = d3.scaleTime().range([0, this.width]),\n        y = d3.scaleLinear().range([this.height, 0]),\n        z = d3.scaleOrdinal(this.colors);\n\n    var stack = d3.stack();\n\n    var area = d3.area()\n        .x(function(d, i) { return x(parseDate(d.data.date)); })\n        .y0(function(d) { return y(d[0]); })\n        .y1(function(d) { return y(d[1]); });\n\n    var g = d3.select(\".transactions-chart\");\n\n    var data = this.usages,\n        keys = Object.keys(data[0]).slice(1);\n\n    x.domain(d3.extent(data, function(d) { return parseDate(d.date) }));\n    y.domain([0, 500]);\n    z.domain(keys);\n    stack.keys(keys);\n\n    var layer = g.selectAll(\".layer\")\n        .data(stack(data))\n        .enter().append(\"g\")\n          .attr(\"class\", \"layer\");\n\n    layer.append(\"path\")\n        .attr(\"class\", \"area\")\n        .style(\"fill\", function(d) { return z(d.key); })\n        .attr(\"d\", area);\n\n    var xAxis = d3.axisBottom(x)\n        .ticks(d3.timeMonth)\n        .tickSize(this.width)\n        .tickFormat(d3.timeFormat(\"%B\"));\n\n    var xGrid = d3.axisBottom(x)\n        .ticks(14)\n        .tickSize(-this.width)\n        .tickFormat(\"\");\n\n    var yAxis = d3.axisLeft(y)\n        .ticks(4)\n        .tickSize(0)\n        .tickFormat(d3.format(\"$\"));\n\n    g.append(\"g\")\n        .attr(\"class\", \"grid\")\n        .attr(\"transform\", \"translate(0,\" + this.height + \")\")\n        .call(xGrid)\n      .selectAll(\".tick line\")\n        .style(\"stroke\", \"#929aa8\")\n\n    g.append(\"g\")\n        .attr(\"class\", \"axis x-axis\")\n        .call(xAxis)\n      .selectAll(\".tick text\")\n        .style(\"text-anchor\", \"start\")\n        .style(\"font\", \"14px sans-serif\")\n        .style(\"font-weight\", \"bold\")\n        .style(\"opacity\", 0.5)\n        .attr(\"x\", 6)\n        .attr(\"y\", 6);\n\n    g.select(\".grid .tick\")\n        .style(\"display\", \"none\");\n\n    g.selectAll(\".domain\")\n        .style(\"display\", \"none\");\n\n    g.append(\"g\")\n        .attr(\"class\", \"axis y-axis\")\n        .attr(\"transform\", \"translate(\" + this.width + \",0)\")\n        .call(yAxis)\n      .selectAll(\".tick text\")\n        .style(\"font\", \"14px sans-serif\")\n        .style(\"font-weight\", \"bold\")\n        .style(\"opacity\", .5)\n        .attr(\"x\", -12);\n\n    g.selectAll(\".y-axis .tick\")\n      .filter(function(d, i, list) {\n        return i === list.length - 1 || i === 0;\n      })\n      .style(\"display\", \"none\");\n  },\n  computed: {\n    viewBox() {\n      return `0 0 ${this.width} ${this.height}`\n    }\n  }\n}\n</script>\n\n<style scoped type=\"scss\">\n  svg {\n    width: 100%;\n    background-color: lightgray;\n    opacity: .7;\n  }\n\n  .chart-container {\n    width: 100%;\n  }\n</style>\n","export default {\n  colors() {\n    return ['#f4dc42', '#45c5ef']\n  }\n}\n","import { render } from \"./chart.vue?vue&type=template&id=259752fa&scoped=true\"\nimport script from \"./chart.vue?vue&type=script&lang=js\"\nexport * from \"./chart.vue?vue&type=script&lang=js\"\n\nimport \"./chart.vue?vue&type=style&index=0&id=259752fa&scoped=true&lang=css\"\n\nimport exportComponent from \"../../../node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-259752fa\"]])\n\nexport default __exports__","<template>\n  <ul class=\"stacked-area-legend\">\n    <li v-for=\"usage_type in usage_types\">\n      <span>\n        <small>\n          {{ usage_type }}\n        </small>\n      </span>\n      <span class=\"color\">\n        <svg width=\"8\" height=\"8\">\n          <ellipse cx=\"4\" cy=\"4\" rx=\"4\" ry=\"4\" v-bind:fill=\"fillColor(usage_type)\"></ellipse>\n        </svg>\n      </span>\n    </li>\n  </ul>\n</template>\n\n<script>\nimport * as d3 from 'd3'\nimport ColorScheme from './color-scheme'\n\nexport default {\n  name: 'stacked-area-legend',\n  props: {\n    categories: { default: () => [] },\n    colors: { default: () => ColorScheme.colors() },\n    usage_types: { default: () => [] }\n  },\n  created() {\n    this.fetchColor = d3.scaleOrdinal().range(this.colors)\n  },\n  methods: {\n    fillColor(key) {\n      return this.fetchColor(key)\n    }\n  }\n}\n</script>\n\n<style scoped lang=\"scss\">\nli {\n  border: none;\n  display: inline;\n  text-align: right;\n  margin-left: 10px;\n}\n\n.color {\n  margin-left: 16px;\n}\n</style>\n","import { render } from \"./legend.vue?vue&type=template&id=11b32475&scoped=true\"\nimport script from \"./legend.vue?vue&type=script&lang=js\"\nexport * from \"./legend.vue?vue&type=script&lang=js\"\n\nimport \"./legend.vue?vue&type=style&index=0&id=11b32475&scoped=true&lang=scss\"\n\nimport exportComponent from \"../../../node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-11b32475\"]])\n\nexport default __exports__","/* eslint no-console: 0 */\n\nimport { createApp } from 'vue'\nimport StackedArea from '../stacked-area/chart.vue'\nimport StackedAreaLegend from '../stacked-area/legend.vue'\n\n\ndocument.addEventListener('turbolinks:load', () => {\n  const components = [StackedArea, StackedAreaLegend]\n  components.forEach(component => {\n    const elements = Array.from(document.getElementsByTagName(component.name))\n    const apps = elements.map(element => {\n      return createApp({ el: element, components: { [component.name]: component } })\n    })\n  })\n})\n"],"names":["class","colors","name","props","usages","default","ColorScheme","width","height","mounted","parseDate","d3","x","range","this","y","z","stack","area","d","i","data","date","y0","y1","g","keys","Object","slice","domain","selectAll","enter","append","attr","style","key","xAxis","ticks","tickSize","tickFormat","xGrid","yAxis","call","select","filter","list","length","computed","viewBox","_createElementBlock","_hoisted_1","$options","_cache","_createElementVNode","_hoisted_2","categories","usage_types","created","fetchColor","methods","fillColor","_Fragment","_renderList","$props","usage_type","_toDisplayString","_hoisted_3","cx","cy","rx","ry","fill","_hoisted_4","document","addEventListener","StackedArea","StackedAreaLegend","forEach","component","Array","from","getElementsByTagName","map","element","createApp","el","components"],"sourceRoot":""}