From c74d38ea2f0c9f57dbdd010129b93533595b4cd8 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.com>
Date: Sun, 28 May 2023 14:55:26 +0400
Subject: [PATCH] feat: download chart data in csv

---
 index.html                                  |  2 +-
 modules/dynamic/overview/charts-overview.js | 26 ++++++++++++++-------
 modules/ui/tools.js                         |  2 +-
 versioning.js                               |  2 +-
 4 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index f75c0a0f..51d1c0d9 100644
--- a/index.html
+++ b/index.html
@@ -7871,7 +7871,7 @@
     <script defer src="modules/relief-icons.js"></script>
     <script defer src="modules/ui/style.js"></script>
     <script defer src="modules/ui/editors.js?v=1.89.12"></script>
-    <script defer src="modules/ui/tools.js?v=1.89.13"></script>
+    <script defer src="modules/ui/tools.js?v=1.89.24"></script>
     <script defer src="modules/ui/world-configurator.js"></script>
     <script defer src="modules/ui/heightmap-editor.js?v=1.89.06"></script>
     <script defer src="modules/ui/provinces-editor.js?v=1.89.00"></script>
diff --git a/modules/dynamic/overview/charts-overview.js b/modules/dynamic/overview/charts-overview.js
index 4d5e14fb..35a83b5e 100644
--- a/modules/dynamic/overview/charts-overview.js
+++ b/modules/dynamic/overview/charts-overview.js
@@ -426,19 +426,18 @@ function renderChart({id, entity, plotBy, groupBy, sorting, type}) {
     })
     .flat();
 
+  const sortedData = sortData(chartData, sorting);
   const colors = getColors();
   const {offset, formatX = formatTicks} = plotTypeMap[type];
 
-  const $chart = createStackedBarChart(chartData, {sorting, colors, tooltip, offset, formatX});
-  insertChart(id, $chart, title);
+  const $chart = createStackedBarChart(sortedData, {colors, tooltip, offset, formatX});
+  insertChart(id, sortedData, $chart, title);
 
   byId("chartsOverview__charts").lastChild.scrollIntoView();
 }
 
 // based on observablehq.com/@d3/stacked-horizontal-bar-chart
-function createStackedBarChart(data, {sorting, colors, tooltip, offset, formatX}) {
-  const sortedData = sortData(data, sorting);
-
+function createStackedBarChart(sortedData, {colors, tooltip, offset, formatX}) {
   const X = sortedData.map(d => d.value);
   const Y = sortedData.map(d => d.name);
   const Z = sortedData.map(d => d.group);
@@ -568,7 +567,7 @@ function createStackedBarChart(data, {sorting, colors, tooltip, offset, formatX}
   return svg.node();
 }
 
-function insertChart(id, $chart, title) {
+function insertChart(id, sortedData, $chart, title) {
   const $chartContainer = byId("chartsOverview__charts");
 
   const $figure = document.createElement("figure");
@@ -580,7 +579,8 @@ function insertChart(id, $chart, title) {
       <strong>Figure ${figureNo}</strong>. ${title}
     </div>
     <div>
-      <button data-tip="Download the chart in svg format (can open in browser or Inkscape)" class="icon-download"></button>
+      <button data-tip="Download chart data as a text file (.csv)" class="icon-download"></button>
+      <button data-tip="Download the chart in svg format (can open in browser or Inkscape)" class="icon-chart-bar"></button>
       <button data-tip="Remove the chart" class="icon-trash"></button>
     </div>
   `;
@@ -589,7 +589,14 @@ function insertChart(id, $chart, title) {
   $figure.appendChild($caption);
   $chartContainer.appendChild($figure);
 
-  const downloadChart = () => {
+  const downloadChartData = () => {
+    const name = `${getFileName(title)}.csv`;
+    const headers = "Name,Group,Value\n";
+    const values = sortedData.map(({name, group, value}) => `${name},${group},${value}`).join("\n");
+    downloadFile(headers + values, name);
+  };
+
+  const downloadChartSvg = () => {
     const name = `${getFileName(title)}.svg`;
     downloadFile($chart.outerHTML, name);
   };
@@ -600,7 +607,8 @@ function insertChart(id, $chart, title) {
     updateDialogPosition();
   };
 
-  $figure.querySelector("button.icon-download").on("click", downloadChart);
+  $figure.querySelector("button.icon-download").on("click", downloadChartData);
+  $figure.querySelector("button.icon-chart-bar").on("click", downloadChartSvg);
   $figure.querySelector("button.icon-trash").on("click", removeChart);
 }
 
diff --git a/modules/ui/tools.js b/modules/ui/tools.js
index 7fbc1ebf..7eb2300d 100644
--- a/modules/ui/tools.js
+++ b/modules/ui/tools.js
@@ -920,6 +920,6 @@ function viewCellDetails() {
 }
 
 async function overviewCharts() {
-  const Overview = await import("../dynamic/overview/charts-overview.js?v=1.87.03");
+  const Overview = await import("../dynamic/overview/charts-overview.js?v=1.89.24");
   Overview.open();
 }
diff --git a/versioning.js b/versioning.js
index fd83435d..e08e6340 100644
--- a/versioning.js
+++ b/versioning.js
@@ -1,7 +1,7 @@
 "use strict";
 
 // version and caching control
-const version = "1.89.23"; // generator version, update each time
+const version = "1.89.24"; // generator version, update each time
 
 {
   document.title += " v" + version;