{"version":3,"mappings":"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","names":["create","element","transaction_counts_grouped_by_months","transactions_price_spacious","currency_unit","currency_unit_with_fallback","DataRetriever","Promise","__vitePreload","n","Highcharts","$","first_day_of_the_month","dayjs","I18n","Page","e","update_xaxis_tickInterval","duration_selected","update","chart_promise","month_labels","chart","TransactionDataChart"],"ignoreList":[],"sources":["../../../app/assets/javascripts/components/chart/transaction_data_chart.ts"],"sourcesContent":["\nimport Promise from \"plugins/bluebird\"\nimport $ from \"jquery\"\nimport dayjs from \"dayjs\"\nimport \"dayjs/locale/zh-cn\"\nimport \"dayjs/locale/zh-tw\"\n\nimport DataRetriever from \"app/data_retriever\"\nimport {Page} from \"app/multi_device\"\n\n\nimport I18n from \"plugins/i18n-js\"\n\n\nexport interface TransactionCountsGroupedByMonth {\n  first_day_of_the_month: string,\n  transaction_count: number,\n}\n\n\nconst create = (\n  element: string | JQuery,\n  {\n    transaction_counts_grouped_by_months,\n    transactions_price_spacious,\n    currency_unit,\n  }: {\n    transaction_counts_grouped_by_months: TransactionCountsGroupedByMonth[],\n    transactions_price_spacious: number[],\n    currency_unit: string | undefined,\n  }): Promise<any> => {\n  const currency_unit_with_fallback =\n    (typeof currency_unit === \"string\") ?\n      currency_unit :\n      DataRetriever.get(\"currency-unit\")\n\n  /* eslint-disable no-undefined */\n  return Promise.resolve(\n    import(\n      \"highcharts\"\n    )\n    .then((Highcharts) => {\n      // Workaround for \"Highcharts is not defined\"\n      window.Highcharts = Highcharts\n\n      return new Highcharts.Chart($(element)[0] as string|HTMLElement, {\n        chart: {\n          marginLeft:   0,\n          marginRight:  0,\n          zoomType:     undefined,\n        },\n        credits: {\n          enabled: false,\n        },\n        loading: {\n          labelStyle: {\n            color: \"#ff8700\",\n          },\n          style: {\n            backgroundColor:  \"white\",\n            opacity:          0.75,\n          },\n        },\n        title: {\n          text: \"\",\n        },\n        subtitle: {\n          text: \"\",\n        },\n        xAxis: [\n          {\n            categories: transaction_counts_grouped_by_months.map(({first_day_of_the_month}) => {\n              // dayjs only accepts lower cased locale\n              return dayjs(first_day_of_the_month).add(2, \"day\").locale(I18n.locale.toLowerCase()).format(\"MMM YYYY\")\n            }),\n            labels: {\n              enabled:  true,\n              style:    {\n                fontSize: \"13px\",\n              },\n            },\n            tickInterval: Page.isForMobile() ? 2 : 1,\n          },\n        ],\n        yAxis: [\n          {\n            min:        0,\n            // https://api.highcharts.com/highcharts/yAxis.max\n            // Max value would be automatically calculated if set it as null.\n            // Set it as 30000 if no data available\n            max:        Math.max(...transactions_price_spacious) < 0 ? 30000 : null,\n            // limit max number of yAxis to avoid unexpected overflow\n            tickAmount: 4,\n            labels:     {\n              formatter: function(){\n                return `${currency_unit_with_fallback}${this.value / 1000}k`\n              },\n              style:    {\n                color:     \"#1d3960\",\n                fontSize:   \"13px\",\n              },\n              // tickInterval: 1000\n              align: \"left\" as \"left\",\n\n              x: 3,\n              y: 16,\n            },\n            title:          undefined,\n            showFirstLabel: false,\n          },\n          {\n            opposite: true,\n            title:    undefined,\n\n            labels: {\n              format: \"{value}\",\n              style:  {\n                color:    \"#c4c4c4\",\n                fontSize: \"13px\",\n              },\n              align: \"right\" as \"right\",\n\n              x: -3,\n              y: 16,\n            },\n            showFirstLabel: false,\n          },\n        ],\n        tooltip: {\n          shared: true,\n        },\n        plotOptions: {\n          column: {\n            states: {\n              hover: {\n                color: \"#008ec7\",\n              },\n            },\n          },\n        },\n        legend: {\n          enabled:  false,\n          layout:   \"vertical\",\n          align:    \"left\",\n\n          verticalAlign: \"top\",\n\n          x: 120,\n          y: 100,\n\n          floating: true,\n\n          backgroundColor: \"#FFFFFF\",\n        },\n        series: [\n          {\n            name:     I18n.t(\"concepts.land.property.transaction.market_data_overview.highcharts.chart.data.transaction_volume\"),\n            type:     \"column\",\n            color:    \"#c4c4c4\",\n            yAxis:    1,\n            data:     transaction_counts_grouped_by_months.map((e) => e.transaction_count),\n            tooltip:  {\n              valueSuffix: \" \" + I18n.t(\"concepts.land.property.transaction.market_data_overview.highcharts.chart.data.transactions\"),\n            },\n          },\n          {\n            name:       I18n.t(\"concepts.land.property.transaction.market_data_overview.highcharts.chart.data.transaction_price\"),\n            type:       \"spline\",\n            color:      \"#1d3960\",\n            data:       transactions_price_spacious,\n            lineWidth:  1.2,\n            tooltip:    {\n              valueSuffix: \" \" + I18n.t(\"concepts.land.property.transaction.market_data_overview.highcharts.chart.data.currency\"),\n            },\n          },\n        ],\n      })\n    }),\n  )\n  /* eslint-enable no-undefined */\n}\n\nconst update_xaxis_tickInterval = (duration_selected: number) => {\n  if (Page.isForMobile()){\n    if (duration_selected === 6){\n      return 2\n    }\n    else if (duration_selected === 12) {\n      return 4\n    }\n    else if (duration_selected === 36) {\n      return 11\n    }\n    else if (duration_selected === 60) {\n      return 19\n    }\n    else {\n      return 1\n    }\n  }\n  else {\n    if (duration_selected === 6) {\n      return 1\n    }\n    else if (duration_selected === 12) {\n      return 2\n    }\n    else if (duration_selected === 36) {\n      return 4\n    }\n    else if (duration_selected === 60) {\n      return 6\n    }\n    else {\n      return 1\n    }\n  }\n}\n\nconst update = (\n  chart_promise: Promise<any>,\n  {transaction_counts_grouped_by_months, transactions_price_spacious}: {\n    transaction_counts_grouped_by_months: TransactionCountsGroupedByMonth[],\n    transactions_price_spacious: number[],\n  },\n  duration_selected: number) => {\n  const month_labels = transaction_counts_grouped_by_months.map(({first_day_of_the_month}) => {\n    // dayjs only accepts lower cased locale\n    return dayjs(first_day_of_the_month).add(2, \"day\").locale(I18n.locale.toLowerCase()).format(\"MMM YYYY\")\n  })\n\n  // # Tempporary workaround to only show\n  //   Transaction Volumn for all districts\n  //   Will use static data (to be provided by server)\n  chart_promise.then((chart) => {\n    chart.series[0].setData(transaction_counts_grouped_by_months.map((e) => e.transaction_count))\n    chart.series[1].setData(transactions_price_spacious)\n    chart.xAxis[0].setCategories(month_labels)\n    chart.xAxis[0].update({tickInterval: update_xaxis_tickInterval(duration_selected)})\n    chart.hideLoading()\n  })\n}\n\n\nexport default {create, update}\n"],"file":"assets/transaction_data_chart-C19YmYpg.js"}