accounting/books
2
0
Fork 0
mirror of https://github.com/frappe/books.git synced 2024-12-24 11:55:46 +00:00
Code Issues Releases Activity

fix(ui): tune line chart, ref dot, miter, etc

Browse Source
This commit is contained in:
18alantom 2022-01-27 00:17:17 +05:30 committed by Alan
parent c99eb37bbd
commit e2afa7419e
1 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/Charts/LineChart.vue
View File

@ -81,6 +81,7 @@
<g v-for="(i, j) in num" :key="j + '-gpath'"> <g v-for="(i, j) in num" :key="j + '-gpath'">
<!-- Gradient Paths --> <!-- Gradient Paths -->
<path <path
stroke-linejoin="round"
:d="getGradLine(i - 1)" :d="getGradLine(i - 1)"
:stroke-width="thickness" :stroke-width="thickness"
stroke-linecap="round" stroke-linecap="round"
@ -90,6 +91,7 @@
<!-- Lines --> <!-- Lines -->
<path <path
stroke-linejoin="round"
:d="getLine(i - 1)" :d="getLine(i - 1)"
:stroke="colors[i - 1] || getRandomColor()" :stroke="colors[i - 1] || getRandomColor()"
:stroke-width="thickness" :stroke-width="thickness"
@ -101,12 +103,13 @@
<!-- Tooltip Reference --> <!-- Tooltip Reference -->
<circle <circle
v-if="xi > -1 && yi > -1" v-if="xi > -1 && yi > -1"
r="6" r="12"
:cx="cx" :cx="cx"
:cy="cy" :cy="cy"
fill="white" :fill="colors[yi]"
:stroke-width="thickness" style="
:stroke="colors[yi]" filter: brightness(115%) drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.25));
"
/> />
</svg> </svg>
<Tooltip <Tooltip
@ -130,7 +133,7 @@ export default {
colors: { type: Array, default: () => [] }, colors: { type: Array, default: () => [] },
xLabels: { type: Array, default: () => [] }, xLabels: { type: Array, default: () => [] },
yLabelDivisions: { type: Number, default: 4 }, yLabelDivisions: { type: Number, default: 4 },
points: { type: Array, default: () => [[100, 200, 300, 400, 500]] }, points: { type: Array, default: () => [[]] },
drawAxis: { type: Boolean, default: false }, drawAxis: { type: Boolean, default: false },
drawXGrid: { type: Boolean, default: true }, drawXGrid: { type: Boolean, default: true },
viewBoxHeight: { type: Number, default: 500 }, viewBoxHeight: { type: Number, default: 500 },
@ -141,7 +144,7 @@ export default {
yLabelOffset: { type: Number, default: 5 }, yLabelOffset: { type: Number, default: 5 },
gridColor: { type: String, default: 'rgba(0, 0, 0, 0.2)' }, gridColor: { type: String, default: 'rgba(0, 0, 0, 0.2)' },
axisColor: { type: String, default: 'rgba(0, 0, 0, 0.5)' }, axisColor: { type: String, default: 'rgba(0, 0, 0, 0.5)' },
thickness: { type: Number, default: 4 }, thickness: { type: Number, default: 5 },
axisThickness: { type: Number, default: 1 }, axisThickness: { type: Number, default: 1 },
gridThickness: { type: Number, default: 0.5 }, gridThickness: { type: Number, default: 0.5 },
yMin: { type: Number, default: null }, yMin: { type: Number, default: null },
@ -245,9 +248,9 @@ export default {
); );
}, },
yScalerValue(i) { yScalerValue(i) {
return this.formatY( const max = this.yMax ?? this.max;
(i * (this.max - this.min)) / this.yLabelDivisions + this.min const min = this.yMin ?? this.min;
); return this.formatY((i * (max - min)) / this.yLabelDivisions + min);
}, },
getLine(i) { getLine(i) {
const [x, y] = this.xy[0]; const [x, y] = this.xy[0];