{"version":3,"sources":["webpack:///./src/components/results/Anthropometry/Results/plotly.vue?d019","webpack:///src/components/results/Anthropometry/Results/plotly.vue","webpack:///./src/components/results/Anthropometry/Results/plotly.vue?82ad","webpack:///./src/components/results/Anthropometry/Results/plotly.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","ref","staticClass","attrs","staticRenderFns","config","defaultHoverLabel","defaultMargin","defaultTitleFont","component"],"mappings":"uHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,IAAI,QAAQC,YAAY,YAAYC,MAAM,CAAC,GAAK,oBACtJC,EAAkB,G,sDCQtB,MAAMC,EAAS,CACf,eACA,YACA,kBACA,eAEMC,EAAoB,CAA1B,mCACMC,EAAgB,CAAtB,qBACMC,EAAmB,CACzB,8BACA,QACA,mBAGA,OACA,kCACA,OACA,MACA,oBACA,aAEA,MACA,YACA,aAEA,SACA,YACA,cAGA,UACA,mBACA,6CAGA,UACA,kBACA,eACA,sBACA,MACA,iBACA,wBACA,MACA,kBACA,yBACA,MACA,aACA,0DACA,2BAEA,oBAEA,MACA,iBACA,iBACA,iBACA,iBACA,iBACA,iBACA,iBACA,eACA,eACA,0BACA,MACA,QACA,QAGA,SACA,wBACA,oBACA,sCACA,gCACA,OACA,CACA,gBACA,gBACA,6CACA,EACA,MACA,gBACA,UAGA,CACA,gBACA,gBACA,8CACA,EACA,MACA,gBACA,WAMA,QACA,2BACA,2BACA,6CACA,EACA,MACA,gBACA,YAIA,iBACA,yDACA,GACA,qCACA,qCACA,+CACA,YACA,eACA,MACA,gBACA,UAIA,oDACA,YACA,iBAGA,sCACA,kBACA,SACA,cACA,QACA,IACA,gBACA,KAEA,SACA,OACA,2CACA,YACA,YACA,aAEA,OACA,2CACA,YACA,gBAEA,IAEA,mBACA,yDACA,2DACA,qCACA,qCACA,+CACA,YACA,MACA,gBACA,WAEA,GACA,qDACA,eACA,iBAGA,cACA,yFACA,+BACA,kBACA,SACA,cACA,QACA,IACA,gBACA,KAEA,SACA,OACA,QACA,YACA,YACA,aAEA,OACA,SACA,cAEA,IAEA,oBACA,yDAEA,SACA,+BACA,kDACA,4CACA,GACA,CACA,gBACA,gBACA,0CACA,eACA,eACA,MACA,gBACA,UAGA,CACA,gBACA,gBACA,2CACA,eACA,eACA,MACA,gBACA,gBAKA,IACA,+BACA,+BACA,QACA,eACA,eACA,MACA,gBACA,WAIA,8BACA,+BACA,cACA,cACA,aACA,eACA,0CACA,MACA,WACA,YAIA,yCACA,kBACA,SACA,oCACA,QACA,IACA,gBACA,KAEA,SACA,OACA,2CACA,YACA,YACA,aAEA,OACA,SACA,YACA,cAEA,IAEA,eACA,0DACA,6BACA,IACA,EADA,6BAEA,kBACA,iCACA,yIACA,UACA,+CACA,SACA,kBACA,aAGA,iBACA,iCACA,yIACA,UACA,gDACA,SACA,kBACA,aAGA,SACA,+BACA,2BACA,SACA,YACA,uBACA,SACA,OAEA,QAEA,gCACA,YAEA,OACA,gBACA,mBACA,QACA,iBAEA,YAEA,iCACA,kBACA,SACA,cACA,aACA,QACA,IACA,gBACA,KAEA,SACA,OACA,kHACA,YACA,YACA,YACA,aAEA,OACA,0CACA,YACA,YACA,cAEA,IAEA,sBACA,yDACA,kCACA,4BACA,6BACA,wDACA,kBACA,SACA,UACA,uBAEA,8BACA,iBACA,sBACA,0CACA,OACA,WACA,QACA,YAEA,mBAGA,+BACA,kBACA,gBACA,aACA,SACA,cACA,SACA,OACA,4CACA,YACA,YACA,YACA,aAEA,OACA,UACA,YACA,YACA,cAEA,IAEA,qBACA,yDACA,GACA,0BACA,wBACA,QACA,iBAEA,0CACA,YAGA,GACA,0BACA,8BACA,sDACA,QACA,gBACA,SAEA,MACA,gBACA,SAEA,sBAGA,GACA,0BACA,6BACA,0DACA,QACA,gBACA,SAEA,MACA,gBACA,SAEA,sBAGA,qCACA,kBACA,SACA,cACA,QACA,IACA,gBACA,KAEA,SACA,OACA,8DACA,YACA,YACA,YACA,aAEA,OACA,oDACA,YACA,YACA,cAEA,MC/c6X,I,YCOzXC,EAAY,eACd,EACAf,EACAU,GACA,EACA,KACA,KACA,MAIa,aAAAK,E","file":"js/chunk-2d217e5b.d84a9947.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:\"chart\",staticClass:\"w100 h100\",attrs:{\"id\":\"plotly-charts\"}})}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div id=\"plotly-charts\" ref=\"chart\" class=\"w100 h100\"></div>\n</template>\n\n<script>\nimport Plotly from 'plotly.js-basic-dist-min';\nimport groupBy from 'lodash/groupBy';\nimport { translatedFilterTypes } from '@/util/indicators';\n\nconst config = {\n  displaylogo: false,\n  editable: false,\n  displayModeBar: false,\n  responsive: true // to make the chart responsive, make sure it's not messing up anything\n};\nconst defaultHoverLabel = { bgcolor: '#FFF', bordercolor: '#000' };\nconst defaultMargin = { t: 10, b: 30, l: 35, r: 10 };\nconst defaultTitleFont = {\n  family: 'DINNextLTPro-Regular',\n  size: 14,\n  color: '#363534b8'\n};\n\nexport default {\n  name: 'AnthropometryResultsCharts',\n  props: {\n    plot: {\n      type: [Object, Array],\n      required: true\n    },\n    type: {\n      type: String,\n      required: true\n    },\n    filters: {\n      type: Object,\n      required: true\n    }\n  },\n  computed: {\n    translatedFilter() {\n      return translatedFilterTypes.call(this, this.filters.type);\n    }\n  },\n  mounted() {\n    switch (this.type) {\n      case 'gaussian':\n        this.renderGaussian();\n        break;\n      case 'cumulative':\n        this.renderCumulative();\n        break;\n      case 'probability':\n        this.renderProbability();\n        break;\n      case 'groups':\n        if (this.filters.group === 'months' && this.filters.type === 'muac') {\n          this.renderAgeMonthGroup();\n        } else {\n          this.renderGroups();\n        }\n        break;\n      case 'dist_whz_2':\n      case 'dist_whz_3':\n      case 'dist_haz_2':\n      case 'dist_haz_3':\n      case 'dist_waz_2':\n      case 'dist_waz_3':\n      case 'dist_edema':\n      case 'dist_gam':\n      case 'dist_sam':\n        this.renderDistribution();\n        break;\n      default:\n        break;\n    }\n  },\n  methods: {\n    buildSexTraces(plot, property, filters, options) {\n      if (filters.group === 'sex') {\n        const boys = plot[property].filter(x => x.group === 'm');\n        const girls = plot[property].filter(x => x.group === 'f');\n        return [\n          {\n            x: boys.map(x => x.x),\n            y: boys.map(y => y.y),\n            name: this.$tc('components.labels.boys', 2),\n            ...options,\n            line: {\n              color: '#5398ef',\n              width: 4\n            }\n          },\n          {\n            x: girls.map(x => x.x),\n            y: girls.map(y => y.y),\n            name: this.$tc('components.labels.girls', 2),\n            ...options,\n            line: {\n              color: '#ff7f7f',\n              width: 4\n            }\n          }\n        ];\n      }\n\n      return [{\n        x: this.plot[property].map(x => x.x),\n        y: this.plot[property].map(y => y.y),\n        name: this.$t('components.labels.ourData'),\n        ...options,\n        line: {\n          color: '#ff7f7f',\n          width: 4\n        }\n      }];\n    },\n    renderGaussian() {\n      const { height } = this.$refs.chart.getBoundingClientRect();\n      const trace1 = {\n        x: this.plot.pdf_gaussian.map(x => x.x),\n        y: this.plot.pdf_gaussian.map(y => y.y),\n        name: this.$t('components.titles.whoStandards'),\n        type: 'line',\n        fill: 'tozeroy',\n        line: {\n          color: '#90e7c5',\n          width: 4\n        }\n      };\n\n      const dataTraces = this.buildSexTraces(this.plot, 'kde', this.filters, {\n        type: 'line',\n        fill: 'tozeroy'\n      });\n\n      Plotly.newPlot('plotly-charts', [trace1, ...dataTraces], {\n        modebardisplay: false,\n        height,\n        showlegend: true,\n        legend: {\n          x: 1,\n          xanchor: 'right',\n          y: 1\n        },\n        margin: defaultMargin,\n        xaxis: {\n          title: this.$t('components.titles.zScores'),\n          showgrid: false,\n          titlefont: defaultTitleFont,\n          zeroline: false\n        },\n        yaxis: {\n          title: this.$t('components.titles.density'),\n          titlefont: defaultTitleFont,\n          range: [0, 0.45]\n        }\n      }, config);\n    },\n    renderCumulative() {\n      const { height } = this.$refs.chart.getBoundingClientRect();\n      const standardTrace = this.filters.group !== 'sex' && this.filters.type !== 'muac' ? [{\n        x: this.plot.cdf_gaussian.map(x => x.x),\n        y: this.plot.cdf_gaussian.map(y => y.y),\n        name: this.$t('components.titles.whoStandards'),\n        type: 'line',\n        line: {\n          color: '#90e7c5',\n          width: 4\n        }\n      }] : [];\n      const dataTraces = this.buildSexTraces(this.plot, 'ecdf', this.filters, {\n        type: 'scatter',\n        mode: 'markers'\n      });\n\n      const traces = [...standardTrace, ...dataTraces];\n      const xAxisLabel = this.filters.type !== 'muac' ? this.$t('components.titles.zScores') : this.$t('values.muac');\n      Plotly.newPlot('plotly-charts', traces, {\n        modebardisplay: false,\n        height,\n        showlegend: true,\n        legend: {\n          x: 1,\n          xanchor: 'right',\n          y: 1\n        },\n        margin: defaultMargin,\n        xaxis: {\n          title: xAxisLabel,\n          showgrid: false,\n          titlefont: defaultTitleFont,\n          zeroline: false\n        },\n        yaxis: {\n          title: '',\n          titlefont: defaultTitleFont\n        }\n      }, config);\n    },\n    renderProbability() {\n      const { height } = this.$refs.chart.getBoundingClientRect();\n\n      let traces = [];\n      if (this.filters.group === 'sex') {\n        const boys = this.plot.points.filter(x => x.group === 'm');\n        const girls = this.plot.points.filter(x => x.group === 'f');\n        traces = [\n          {\n            x: boys.map(x => x.x),\n            y: boys.map(y => y.y),\n            name: this.$tc('components.labels.boys', 2),\n            type: 'scatter',\n            mode: 'markers',\n            line: {\n              color: '#5398ef',\n              width: 4\n            }\n          },\n          {\n            x: girls.map(x => x.x),\n            y: girls.map(y => y.y),\n            name: this.$tc('components.labels.girls', 2),\n            type: 'scatter',\n            mode: 'markers',\n            line: {\n              color: '#ff7f7f',\n              width: 4\n            }\n          }\n        ];\n      } else {\n        traces = [{\n          x: this.plot.points.map(x => x.x),\n          y: this.plot.points.map(y => y.y),\n          name: '',\n          type: 'scatter',\n          mode: 'markers',\n          line: {\n            color: '#ff7f7f',\n            width: 4\n          }\n        }];\n      }\n      const colors = ['#ff7f7f', '#5398ef'];\n      const bestFitTrace = this.plot.lines.map((line, index) => ({\n        x: [line.x1, line.x2],\n        y: [line.y1, line.y2],\n        mode: 'lines',\n        type: 'scatter',\n        name: this.$t('components.labels.bestFit'),\n        line: {\n          color: colors[index],\n          width: 4\n        }\n      }));\n\n      Plotly.newPlot('plotly-charts', [...traces, ...bestFitTrace], {\n        modebardisplay: false,\n        height,\n        showlegend: this.plot.lines.length > 1,\n        legend: {\n          x: 1,\n          xanchor: 'right',\n          y: 1\n        },\n        margin: defaultMargin,\n        xaxis: {\n          title: this.$t('components.titles.zScores'),\n          showgrid: false,\n          titlefont: defaultTitleFont,\n          zeroline: true\n        },\n        yaxis: {\n          title: '',\n          titlefont: defaultTitleFont,\n          zeroline: true\n        }\n      }, config);\n    },\n    renderGroups() {\n      const { height } = this.$refs.chart.getBoundingClientRect();\n      const { group, type } = this.filters;\n      let text = this.plot.map(y => `n=${y.n}`);\n      let hovertemplate;\n      if (group === 'cluster') {\n        text = this.plot.map(y => [y.n, y.xbar]);\n        let meanText = type === 'muac' ? this.$t('components.labels.meanMM', { number: '%{text[1]}' }) : this.$t('components.labels.meanZScore', { number: '%{text[1]}' });\n        meanText += '<br>';\n        hovertemplate = this.$t('components.labels.clusterMeanText', {\n          x: '%{x}',\n          text: '%{text[0]}',\n          meanText\n        });\n      }\n      if (group === 'months') {\n        text = this.plot.map(y => [y.n, y.xbar]);\n        let meanText = type === 'muac' ? this.$t('components.labels.meanMM', { number: '%{text[1]}' }) : this.$t('components.labels.meanZScore', { number: '%{text[1]}' });\n        meanText += '<br>';\n        hovertemplate = this.$t('components.labels.AgeGroupMeanText', {\n          x: '%{x}',\n          text: '%{text[0]}',\n          meanText\n        });\n      }\n      const data = {\n        x: this.plot.map(x => x.groupvar),\n        y: this.plot.map(y => y.xbar),\n        error_y: {\n          type: 'data',\n          array: this.plot.map(y => {\n            if (y.xbar < 0) {\n              return 0 - y.sd;\n            }\n            return 0 + y.sd;\n          }),\n          arrayminus: this.plot.map(() => 0),\n          visible: true\n        },\n        text,\n        hovertemplate,\n        textposition: 'top',\n        marker: {\n          color: '#ff7f7f'\n        },\n        type: 'bar'\n      };\n      Plotly.newPlot('plotly-charts', [data], {\n        modebardisplay: false,\n        height,\n        showlegend: false,\n        hoverlabel: defaultHoverLabel,\n        legend: {\n          x: 1,\n          xanchor: 'right',\n          y: 1\n        },\n        margin: defaultMargin,\n        xaxis: {\n          title: this.filters.group === 'months' ? this.$tc('components.titles.month', 2) : this.$tc('components.titles.cluster', 2),\n          showgrid: false,\n          autotick: false,\n          titlefont: defaultTitleFont,\n          zeroline: false\n        },\n        yaxis: {\n          title: this.translatedFilter.toUpperCase(),\n          showgrid: false,\n          titlefont: defaultTitleFont,\n          zeroline: false\n        }\n      }, config);\n    },\n    renderAgeMonthGroup() {\n      const { height } = this.$refs.chart.getBoundingClientRect();\n      const colors = ['#ff7f7f', '#f1ff2d', '#90e7c5'];\n      const ageGrouped = groupBy(this.plot, 'age_bins');\n      const muacGrouped = groupBy(this.plot, 'muac_bins');\n      const hovertemplate = this.$t('components.labels.percentOfCasesInAgeGroup', {\n        text: '%{text[1]}',\n        x: '%{x}',\n        y: '%{y}%',\n        textTwo: '%{text[0]}'\n      });\n      const traces = Object.keys(muacGrouped).map((key, index) => ({\n        x: Object.keys(ageGrouped),\n        y: muacGrouped[key].map(y => y.p || 0),\n        text: muacGrouped[key].map(value => [value.n, key.replace('%', '')]),\n        name: key,\n        type: 'bar',\n        marker: {\n          color: colors[index]\n        },\n        hovertemplate\n      }));\n\n      Plotly.newPlot('plotly-charts', traces, {\n        modebardisplay: false,\n        barmode: 'stack',\n        hoverlabel: defaultHoverLabel,\n        height,\n        showlegend: true,\n        margin: defaultMargin,\n        xaxis: {\n          title: this.$tc('components.titles.month', 2),\n          showgrid: false,\n          autotick: false,\n          titlefont: defaultTitleFont,\n          zeroline: false\n        },\n        yaxis: {\n          title: '%',\n          showgrid: false,\n          titlefont: defaultTitleFont,\n          zeroline: false\n        }\n      }, config);\n    },\n    renderDistribution() {\n      const { height } = this.$refs.chart.getBoundingClientRect();\n      const data = {\n        x: this.plot.map(x => x.bin),\n        y: this.plot.map(y => y.n),\n        marker: {\n          color: '#ff7f7f'\n        },\n        name: this.$tc('components.titles.case', 2),\n        type: 'bar'\n      };\n\n      const poissonTrace = {\n        x: this.plot.map(x => x.bin),\n        y: this.plot.map(y => y.poisson),\n        name: this.$t('components.titles.poissonDistribution'),\n        marker: {\n          color: '#90e7c5',\n          size: 10\n        },\n        line: {\n          color: '#000000',\n          width: 1\n        },\n        mode: 'lines+markers'\n      };\n\n      const binomialTrace = {\n        x: this.plot.map(x => x.bin),\n        y: this.plot.map(y => y.nbinom),\n        name: this.$t('components.titles.negBinomialDistribution'),\n        marker: {\n          color: '#5398ef',\n          size: 10\n        },\n        line: {\n          color: '#000000',\n          width: 1\n        },\n        mode: 'lines+markers'\n      };\n\n      Plotly.newPlot('plotly-charts', [data, poissonTrace, binomialTrace], {\n        modebardisplay: false,\n        height,\n        showlegend: true,\n        legend: {\n          x: 1,\n          xanchor: 'right',\n          y: 1\n        },\n        margin: defaultMargin,\n        xaxis: {\n          title: this.$t('components.titles.numberOfCasesInEachCluster'),\n          showgrid: false,\n          autotick: false,\n          titlefont: defaultTitleFont,\n          zeroline: false\n        },\n        yaxis: {\n          title: this.$t('components.titles.numberOfClusters'),\n          showgrid: false,\n          titlefont: defaultTitleFont,\n          zeroline: false\n        }\n      }, config);\n    }\n  }\n};\n</script>\n\n<style lang=\"scss\">\n</style>\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./plotly.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./plotly.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./plotly.vue?vue&type=template&id=3707c6a7&\"\nimport script from \"./plotly.vue?vue&type=script&lang=js&\"\nexport * from \"./plotly.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}