{"version":3,"file":"js/pie-chart-292ccbdcf14a380bbaa8.js","mappings":"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","sources":["webpack://app/./app/javascript/pie-chart/chart.vue","webpack://app/./app/javascript/pie-chart/color-scheme.js","webpack://app/./app/javascript/pie-chart/app.vue?07e6","webpack://app/./app/javascript/pie-chart/app.vue","webpack://app/./app/javascript/pie-chart/chart.vue?2601","webpack://app/./app/javascript/pie-chart/legend.vue","webpack://app/./app/javascript/pie-chart/app-legend.vue?5203","webpack://app/./app/javascript/pie-chart/app-legend.vue","webpack://app/./app/javascript/pie-chart/legend.vue?6459","webpack://app/./app/javascript/packs/pie-chart.js"],"sourcesContent":["<template>\n  <div class=\"chart-container\">\n    <svg :width=\"diameter\" :height=\"diameter\">\n      <g :transform=\"transform\">\n        <path\n          v-for=\"slice in slices\"\n          :fill=\"fillColor(slice.data.name)\"\n          :d=\"arc(slice)\">\n        </path>\n      </g>\n    </svg>\n  </div>\n</template>\n\n<script>\nimport { computed, onMounted, ref, reactive } from 'vue';\nimport * as d3 from 'd3';\nimport ColorScheme from './color-scheme'\n\nexport default {\n  name: 'pie-chart',\n  props: {\n    categories: {\n      type: Array,\n      default: () => []\n    },\n    colors: {\n      type: Array,\n      default: () => ColorScheme.colors()\n    },\n    radius: {\n      type: Number,\n      default: 75\n    },\n    thickness: {\n      type: Number,\n      default: 15\n    }\n  },\n  setup(props) {\n    const state = reactive({\n      fetchColor: null,\n    });\n\n    onMounted(() => {\n      state.fetchColor = d3.scaleOrdinal()\n        .domain(props.categories.map(cat => cat.name)) \n        .range(props.colors);\n    });\n\n    const diameter = computed(() => props.radius * 2);\n\n    const transform = computed(() => `translate(${props.radius},${props.radius})`);\n\n    const slices = computed(() => {\n      const computeSlices = d3.pie()\n        .value(item => item.amount)\n        .sort(null);\n      \n      return computeSlices(props.categories);\n    });\n\n    function fillColor(key) {\n      return state.fetchColor == null ? \"\" : state.fetchColor(key);\n    }\n\n    function arc({ startAngle, endAngle }) {\n      const computeArc = d3.arc()\n        .innerRadius(props.radius - props.thickness)\n        .outerRadius(props.radius);\n\n      return computeArc({ startAngle, endAngle });\n    }\n    return {\n      state,\n      diameter,\n      transform,\n      slices,\n      fillColor,\n      arc,\n    }\n  }\n}\n</script>\n\n<style scoped type=\"scss\">\n</style>\n","export default {\n  // Do not change the position of the first color. It is explicitly for the 'Remaining' category key\n  colors() {\n    return ['#B1BCBC', '#3ACF80', '#70F2F2', '#B3F2C9', '#528C18', '#C3F25C']\n  }\n}\n","import script from \"./app.vue?vue&type=script&lang=js\"\nexport * from \"./app.vue?vue&type=script&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__","<script>\nimport PieChart from './chart'\n\nexport default {\n  el: '#dashboard-chart',\n  components: {\n    PieChart\n  }\n}\n</script>\n","import { render } from \"./chart.vue?vue&type=template&id=713e2057\"\nimport script from \"./chart.vue?vue&type=script&lang=js\"\nexport * from \"./chart.vue?vue&type=script&lang=js\"\n\nimport exportComponent from \"../../../node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render]])\n\nexport default __exports__","<template>\n  <ul class=\"list-group legend\">\n    <li v-for=\"category in categories\" class=\"list-group-item legend-item\">\n      <div class=\"legend-item-content\">\n        <div class=\"legend-item-value\">\n          {{ category.amount_formatted }}\n        </div>\n        <small class=\"legend-item-text\">\n          {{ category.name }}\n        </small>\n      </div>\n      <div class=\"legend-item-color\">\n        <svg width=\"8\" height=\"8\">\n          <ellipse cx=\"4\" cy=\"4\" rx=\"4\" ry=\"4\" v-bind:fill=\"fillColor(category.name)\"></ellipse>\n        </svg>\n      </div>\n    </li>\n  </ul>\n</template>\n\n<script>\nimport * as d3 from 'd3'\nimport ColorScheme from './color-scheme'\n\nexport default {\n  name: 'pie-chart-legend',\n  props: {\n    categories: { default: () => [] },\n    colors: { default: () => ColorScheme.colors() }\n  },\n  created() {\n    this.fetchColor = d3.scaleOrdinal().range(this.colors)\n  },\n  methods: {\n    fillColor(key) {\n      if(key == 'Remaining') {\n        return '#b1bcbc'\n      }\n      return this.fetchColor(key)\n    }\n  }\n}\n</script>\n\n<style scoped lang=\"scss\">\nli {\n  border: none;\n  padding: 16px 0 0 0;\n  display: flex;\n  text-align: right;\n  justify-content: flex-end;\n\n  &:first-child {\n    padding: 0;\n  }\n}\n\n.legend-item-color {\n  margin-left: 16px;\n}\n</style>\n","import script from \"./app-legend.vue?vue&type=script&lang=js\"\nexport * from \"./app-legend.vue?vue&type=script&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__","<script>\nimport PieChartLegend from './legend'\n\nexport default {\n  el: '#dashboard-chart-legend',\n  components: {\n    PieChartLegend,\n  }\n}\n</script>\n","import { render } from \"./legend.vue?vue&type=template&id=0a51a55d&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=0a51a55d&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-0a51a55d\"]])\n\nexport default __exports__","/* eslint no-console: 0 */\n\nimport { createApp } from 'vue'\nimport AppPieChart from '../pie-chart/app.vue'\nimport AppPieChartLegend from '../pie-chart/app-legend.vue'\n\ndocument.addEventListener('turbolinks:load', () => {\n  createApp(AppPieChart).mount(\"#dashboard-chart\");\n  createApp(AppPieChartLegend).mount(\"#dashboard-chart-legend\");\n})\n"],"names":["class","colors","name","props","categories","type","Array","default","ColorScheme","radius","Number","thickness","setup","state","reactive","fetchColor","onMounted","d3","domain","map","cat","range","diameter","computed","transform","slices","value","item","amount","sort","computeSlices","fillColor","key","arc","startAngle","endAngle","innerRadius","outerRadius","computeArc","el","components","PieChart","_createElementBlock","_hoisted_1","width","$setup","height","_createElementVNode","_Fragment","_renderList","slice","fill","data","d","_hoisted_4","_hoisted_3","_hoisted_2","created","this","methods","PieChartLegend","$props","category","_toDisplayString","amount_formatted","_hoisted_5","_hoisted_6","_hoisted_7","cx","cy","rx","ry","$options","_hoisted_8","document","addEventListener","createApp","AppPieChart","mount","AppPieChartLegend"],"sourceRoot":""}