This code snippet was originally sourced from an example at https://medium.com/@lambrospd/5-simple-rules-to-data-visualization-with-vue-js-and-d3-js-f6b2bd6a1d40
I attempted to adapt the example to a TypeScript/Vue 3 version, and below is my implementation:
<script lang="ts">
import { ref, defineComponent, computed, toRef } from "vue";
import * as d3 from 'd3';
export default defineComponent({
name: "StandardMetric",
props: {
data: {
required: true,
type: Array,
},
width: {
default: 500,
type: Number,
},
height: {
height: 270,
type: Number,
}
},
setup: function (props, {attrs, slots, emit}){
const padding = ref(60);
const rangeY = computed(() => {
const defaultHeight = toRef(props, 'height').value;
const height: Number = defaultHeight?defaultHeight:270 - padding.value;
const result = [0, height];
return result;
});
const rangeX = computed(() => {
const defaultWidth: Number = toRef(props, 'width').value;
const width: Number = defaultWidth?defaultWidth:500 - padding.value;
return [0, width];
});
const path = computed(()=> {
// const x = d3.scaleLinear().range(rangeX);
// v1 error
// const x = d3.scaleLinear().range(rangeX.value);
// v2 error
const x = d3.scaleLinear().range([0, 500]);
const y = d3.scaleLinear().range(rangeY.value);
d3.axisLeft().scale(x);
d3.axisTop().scale(y);
x.domain(d3.extent(this.data, (d, i) => i));
y.domain([0, d3.max(this.data, d => d)]);
return d3.line()
.x((d, i) => x(i))
.y(d => y(d));
}),
When using the computed function in 'path', I encountered an error in the first statement. If I use the v1 statement, the error message says:
argument of type ComputeRef<number[]> is not assignable to iterable
Alternatively, if I use the v2 statement, the error becomes:
argument of type number[] is not assignable to iterable
However, hardcoding it to [0,500] allows it to pass without any errors. I am puzzled about the correct way to write this statement. Can someone offer some guidance or assistance? Thank you.