backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2025-12-17 09:41:24 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: download chart data in csv

Browse source
This commit is contained in:
Azgaar 2023-05-28 14:55:26 +04:00
parent 0b04efc90f
commit c74d38ea2f
4 changed files with 20 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -7871,7 +7871,7 @@
<script defer src="modules/relief-icons.js"></script> <script defer src="modules/relief-icons.js"></script>
<script defer src="modules/ui/style.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/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/world-configurator.js"></script>
<script defer src="modules/ui/heightmap-editor.js?v=1.89.06"></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> <script defer src="modules/ui/provinces-editor.js?v=1.89.00"></script>

26
modules/dynamic/overview/charts-overview.js
View file

@ -426,19 +426,18 @@ function renderChart({id, entity, plotBy, groupBy, sorting, type}) {
}) })
.flat(); .flat();
const sortedData = sortData(chartData, sorting);
const colors = getColors(); const colors = getColors();
const {offset, formatX = formatTicks} = plotTypeMap[type]; const {offset, formatX = formatTicks} = plotTypeMap[type];
const $chart = createStackedBarChart(chartData, {sorting, colors, tooltip, offset, formatX}); const $chart = createStackedBarChart(sortedData, {colors, tooltip, offset, formatX});
insertChart(id, $chart, title); insertChart(id, sortedData, $chart, title);
byId("chartsOverview__charts").lastChild.scrollIntoView(); byId("chartsOverview__charts").lastChild.scrollIntoView();
} }
// based on observablehq.com/@d3/stacked-horizontal-bar-chart // based on observablehq.com/@d3/stacked-horizontal-bar-chart
function createStackedBarChart(data, {sorting, colors, tooltip, offset, formatX}) { function createStackedBarChart(sortedData, {colors, tooltip, offset, formatX}) {
const sortedData = sortData(data, sorting);
const X = sortedData.map(d => d.value); const X = sortedData.map(d => d.value);
const Y = sortedData.map(d => d.name); const Y = sortedData.map(d => d.name);
const Z = sortedData.map(d => d.group); const Z = sortedData.map(d => d.group);
@ -568,7 +567,7 @@ function createStackedBarChart(data, {sorting, colors, tooltip, offset, formatX}
return svg.node(); return svg.node();
} }
function insertChart(id, $chart, title) { function insertChart(id, sortedData, $chart, title) {
const $chartContainer = byId("chartsOverview__charts"); const $chartContainer = byId("chartsOverview__charts");
const $figure = document.createElement("figure"); const $figure = document.createElement("figure");
@ -580,7 +579,8 @@ function insertChart(id, $chart, title) {
<strong>Figure ${figureNo}</strong>. ${title} <strong>Figure ${figureNo}</strong>. ${title}
</div> </div>
<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> <button data-tip="Remove the chart" class="icon-trash"></button>
</div> </div>
`; `;
@ -589,7 +589,14 @@ function insertChart(id, $chart, title) {
$figure.appendChild($caption); $figure.appendChild($caption);
$chartContainer.appendChild($figure); $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`; const name = `${getFileName(title)}.svg`;
downloadFile($chart.outerHTML, name); downloadFile($chart.outerHTML, name);
}; };
@ -600,7 +607,8 @@ function insertChart(id, $chart, title) {
updateDialogPosition(); 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); $figure.querySelector("button.icon-trash").on("click", removeChart);
} }

2
modules/ui/tools.js
View file

@ -920,6 +920,6 @@ function viewCellDetails() {
} }
async function overviewCharts() { 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(); Overview.open();
} }

2
versioning.js
View file

@ -1,7 +1,7 @@
"use strict"; "use strict";
// version and caching control // 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; document.title += " v" + version;