From 640640be853f555aab33b2f33e2f2b95dbee6b05 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Huss?= Date: Thu, 7 Mar 2024 11:53:03 +0100 Subject: [PATCH] 0.1.8 (fixes) --- front/components/charts/stackedBarChart.vue | 9 +-- front/components/core/AllProblemOverview.vue | 37 +++++++++++ front/components/core/ProblemOverview.vue | 12 ++-- front/libs/core/index.ts | 2 +- front/pages/install/vynil/InstallEdit.vue | 3 +- front/pages/install/vynil/InstallNew.vue | 4 +- .../pages/install/vynil/installDashboard.vue | 27 ++++++++ package.json | 2 +- .../generator/front/all.pages.advices.vue.hbs | 61 +++++++++++-------- 9 files changed, 119 insertions(+), 38 deletions(-) create mode 100644 front/components/core/AllProblemOverview.vue diff --git a/front/components/charts/stackedBarChart.vue b/front/components/charts/stackedBarChart.vue index 75e999f..ceb2023 100644 --- a/front/components/charts/stackedBarChart.vue +++ b/front/components/charts/stackedBarChart.vue @@ -2,7 +2,7 @@ import { ref, onMounted } from "vue"; import * as d3 from "d3"; import {chartSizeOptions,chartMarginOptions} from "../../libs/core" -import {getSizeOptions,getMarginOptions} from "./commonTools" +import {getSizeOptions,getMarginOptions,onlyUnique} from "./commonTools" const props = defineProps<{ options?: chartSizeOptions&chartMarginOptions datum: Array @@ -12,7 +12,7 @@ const props = defineProps<{ }>(); const marginTop = 10; const marginRight = 10; -const marginBottom = 20; +const marginBottom = 30; const marginLeft = 40; const defaultHeight = 400; const defaultWidth = 3*defaultHeight/2; @@ -23,10 +23,11 @@ const series = d3.stack().keys(d3.union(props.datum.map(props.axisColor))).value const x = d3.scaleBand().domain(d3.groupSort(props.datum, D => -d3.sum(D, props.getVal), props.axisX)).range([marginLeft, options.value.width - marginRight]).padding(0.1); const y = d3.scaleLinear().domain([0, d3.max(series, d => d3.max(d, d => d[1]))]).rangeRound([options.value.height - marginBottom, marginTop]); const color = props.datum.length>1?d3.scaleOrdinal().domain(series.map(d => d.key)).range(d3.schemeSpectral[series.length>4?series.length:4]).unknown("#ccc"):()=>d3.schemeSpectral[4][1]; +const rotation = options.value.width/(props.datum.map(props.axisX).filter(onlyUnique).length+1)<80?-10:0 const formatValue = x => isNaN(x) ? "N/A" : x.toLocaleString("en") onMounted(() => { const svg = d3.select(svgRoot.value); - svg.select(".axisBottom").call(d3.axisBottom(x).tickSizeOuter(0)).call(g => g.selectAll(".domain").remove()); + svg.select(".axisBottom").call(d3.axisBottom(x).tickSizeOuter(0)).call(g => g.selectAll(".domain").remove()).call(g => g.selectAll("text").attr('transform', `rotate(${rotation})`)); svg.select(".axisLeft").call(d3.axisLeft(y)).call(g => g.selectAll(".domain").remove()); svg.select(".rects").selectAll().data(series).join("g") .attr("fill", d => color(d.key)) @@ -35,7 +36,7 @@ onMounted(() => { .append("title") .text(d => `${d.data[0]} ${d.key}\n${formatValue(props.getVal(d.data[1].get(d.key)))}`); svg.select(".labels").selectAll().data(series).join("g").selectAll("text").data(D => D.map(d => (d.key = D.key, d))).join("text") - .text((x) => `${x.key}`).attr("y", d => isNaN(y(d[0]))||isNaN(y(d[1]))?-10:(y(d[0]) + y(d[1]))/2).attr("x", d => x(d.data[0])+x.bandwidth()/2) + .text((x) => `${x.key}`).attr('transform', d=> `translate(${x(d.data[0])+x.bandwidth()/2}, ${isNaN(y(d[0]))||isNaN(y(d[1]))?-100:(y(d[0]) + y(d[1]))/2}) rotate(${rotation})`) })