accounting/books
2
0
Fork 0
mirror of https://github.com/frappe/books.git synced 2025-01-11 18:38:47 +00:00
Code Issues Releases Activity

fix(ui): LineChart gradient calculation

Browse Source 
- grid extension
This commit is contained in:
18alantom 2022-01-26 16:30:42 +05:30 committed by Alan
parent b52ff05087
commit 277f294e5b
1 changed files with 39 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -56,38 +56,46 @@
</text> </text>
</template> </template>
<!-- Gradients --> <!-- Gradient Mask -->
<defs> <defs>
<linearGradient id="grad" x1="0" y1="0" x2="0" y2="85%"> <linearGradient id="grad" x1="0" y1="0" x2="0" y2="85%">
<stop offset="0%" stop-color="rgba(255, 255, 255, 0.4)" /> <stop offset="0%" stop-color="rgba(255, 255, 255, 0.5)" />
<stop offset="100%" stop-color="rgba(255, 255, 255, 0)" /> <stop offset="40%" stop-color="rgba(255, 255, 255, 0.1)" />
<stop offset="70%" stop-color="rgba(255, 255, 255, 0)" />
</linearGradient> </linearGradient>
<mask id="rect-mask">
<rect x="0" y="0" width="100%" height="100%" fill="url('#grad')" /> <mask v-for="(i, j) in num" :key="j + '-mask'" :id="'rect-mask-' + i">
<rect
x="0"
:y="gradY(j)"
:height="viewBoxHeight - gradY(j)"
width="100%"
fill="url('#grad')"
/>
</mask> </mask>
</defs> </defs>
<!-- Gradient Paths --> <template v-for="(i, j) in num">
<path <!-- Gradient Paths -->
v-for="(i, j) in num" <path
:key="j + '-gpath'" :key="j + '-gpath'"
:d="getGradLine(i - 1)" :d="getGradLine(i - 1)"
:stroke-width="thickness" :stroke-width="thickness"
stroke-linecap="round" stroke-linecap="round"
:fill="colors[i - 1] || getRandomColor()" :fill="colors[i - 1] || getRandomColor()"
mask="url('#rect-mask')" :mask="`url('#rect-mask-${i}')`"
/> />
<!-- Lines --> <!-- Lines -->
<path <path
v-for="(i, j) in num" :key="j + '-lpath'"
:key="j + '-line'" :d="getLine(i - 1)"
:d="getLine(i - 1)" :stroke="colors[i - 1] || getRandomColor()"
:stroke="colors[i - 1] || getRandomColor()" :stroke-width="thickness"
:stroke-width="thickness" stroke-linecap="round"
stroke-linecap="round" fill="transparent"
fill="transparent" />
/> </template>
</svg> </svg>
</template> </template>
<script> <script>
@ -120,6 +128,7 @@ export default {
fontColor: { type: String, default: '#415668' }, fontColor: { type: String, default: '#415668' },
bottom: { type: Number, default: 0 }, bottom: { type: Number, default: 0 },
left: { type: Number, default: 55 }, left: { type: Number, default: 55 },
extendGridX: { type: Number, default: -20 },
}, },
computed: { computed: {
fontStyle() { fontStyle() {
@ -176,8 +185,8 @@ export default {
return this.axisPadding + this.pointsPadding; return this.axisPadding + this.pointsPadding;
}, },
xGrid() { xGrid() {
const lo = this.padding + this.left; const lo = this.padding + this.left + this.extendGridX;
const ro = this.viewBoxWidth - this.padding; const ro = this.viewBoxWidth - this.padding - this.extendGridX;
const ys = Array(this.xLabelDivisions + 1) const ys = Array(this.xLabelDivisions + 1)
.fill() .fill()
@ -194,6 +203,9 @@ export default {
}, },
mounted() {}, mounted() {},
methods: { methods: {
gradY(i) {
return Math.min(...this.ys[i]).toFixed();
},
yScalerLocation(i) { yScalerLocation(i) {
return ( return (
((this.xLabelDivisions - i) * ((this.xLabelDivisions - i) *