40 lines
1022 B
Svelte
40 lines
1022 B
Svelte
|
<script>
|
||
|
|
import { getColorSchema, getChartGradient, notNull } from "./utils"
|
||
|
|
import britecharts from "britecharts"
|
||
|
|
import { onMount } from "svelte"
|
||
|
|
|
||
|
|
import { select } from "d3-selection"
|
||
|
|
import shortid from "shortid"
|
||
|
|
|
||
|
|
const _id = shortid.generate()
|
||
|
|
|
||
|
|
const chart = britecharts.chartname()
|
||
|
|
const chartClass = `donut-container-${_id}`
|
||
|
|
const legendClass = `legend-container-${_id}`
|
||
|
|
|
||
|
|
let chartElement = null
|
||
|
|
let chartContainer = null
|
||
|
|
|
||
|
|
export let data = []
|
||
|
|
export let color = "britecharts"
|
||
|
|
export let height = 200
|
||
|
|
export let width = 200
|
||
|
|
export let margin = { top: 0, right: 0, bottom: 0, left: 0 }
|
||
|
|
export let useLegend = true
|
||
|
|
|
||
|
|
onMount(() => {
|
||
|
|
if (chart) {
|
||
|
|
chartContainer = select(`.${chartClass}`)
|
||
|
|
bindChartUIProps()
|
||
|
|
bindChartEvents()
|
||
|
|
chartContainer.datum(data).call(chart)
|
||
|
|
bindChartTooltip()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div bind:this={chartElement} class={chartClass} />
|
||
|
|
{#if useLegend}
|
||
|
|
<div class={legendClass} />
|
||
|
|
{/if}
|