forked from tsai/budibase
cmack
6 years ago
14 changed files with 706 additions and 75 deletions
@ -0,0 +1,67 @@ |
|||
<script> |
|||
import Chart, { getColorSchema, getChartGradient } from "./Chart.svelte" |
|||
|
|||
/* |
|||
ISSUES: |
|||
nameLabel, valueLabel - what are these? Seem to break whenever passed a string or number. What type? |
|||
https://github.com/britecharts/britecharts/blob/a2c45ab023112b36e14f47c278e3a1e1c05f8383/src/charts/bar.js#L145 |
|||
*/ |
|||
|
|||
let type = "bar" |
|||
let tooltip |
|||
|
|||
export let customMouseOver = () => tooltip.show() |
|||
export let customMouseMove = (datapoint, colorMapping, x, y) => |
|||
tooltip.update(datapoint, colorMapping, x, y) |
|||
export let customMouseOut = () => tooltip.hide() |
|||
export let customClick = null |
|||
|
|||
export let data = [] |
|||
export let xAxisLabel = "" |
|||
export let yAxisLabel = "" |
|||
export let betweenBarsPadding = 5 |
|||
export let gradient = null |
|||
export let color = "britecharts" |
|||
export let enableLabels = true |
|||
export let hasSingleBarHighlight = true |
|||
export let height = 200 |
|||
export let width = 300 |
|||
export let isAnimated = true |
|||
export let isHorizontal = true |
|||
export let labelOffset = null |
|||
export let labelsNumberFormat = null |
|||
export let labelSize = null |
|||
export let locale = null |
|||
export let nameLabel = null |
|||
export let numberFormat = null |
|||
|
|||
export let useLegend = true |
|||
|
|||
$: colorSchema = getColorSchema(color) |
|||
$: chartGradient = getChartGradient(gradient) |
|||
</script> |
|||
|
|||
<Chart |
|||
bind:tooltip |
|||
{type} |
|||
{data} |
|||
on={{ customClick, customMouseMove, customMouseOut, customMouseOver }} |
|||
useTooltip |
|||
{useLegend} |
|||
{betweenBarsPadding} |
|||
{chartGradient} |
|||
{colorSchema} |
|||
{enableLabels} |
|||
{hasSingleBarHighlight} |
|||
{height} |
|||
{width} |
|||
{isAnimated} |
|||
{isHorizontal} |
|||
{labelOffset} |
|||
{labelsNumberFormat} |
|||
{labelSize} |
|||
{locale} |
|||
{nameLabel} |
|||
{numberFormat} |
|||
{xAxisLabel} |
|||
{yAxisLabel} /> |
|||
@ -0,0 +1,82 @@ |
|||
<script> |
|||
import Chart, { getColorSchema, getChartGradient } from "./Chart.svelte" |
|||
|
|||
/* |
|||
ISSUES: |
|||
|
|||
*/ |
|||
|
|||
let type = "line" |
|||
let tooltip |
|||
|
|||
export let data = [] |
|||
export let axisTimeCombinations = "" |
|||
export let color = "britecharts" |
|||
export let grid = "horizontal" |
|||
export let aspectRatio = 0.5 |
|||
export let dateLabel = "date" |
|||
export let width = null |
|||
export let height = null |
|||
export let isAnimated = true |
|||
export let lineCurve = "linear" //see api for possible opts |
|||
export let locale = "en-GB" |
|||
export let numberFormat = "" |
|||
export let shouldShowAllDataPoints = true |
|||
export let topicLabel = null |
|||
export let valueLabel = null |
|||
export let xAxisLabel = "" |
|||
export let xAxisValueType = "date" |
|||
export let xAxisScale = "linear" |
|||
export let xAxisFormat = "day-month" |
|||
export let xAxisCustomFormat = "%H" |
|||
|
|||
$: colorSchema = getColorSchema(color) |
|||
$: console.log($$props) |
|||
</script> |
|||
|
|||
<Chart |
|||
{type} |
|||
{data} |
|||
{colorSchema} |
|||
{axisTimeCombinations} |
|||
{lineCurve} |
|||
{numberFormat} |
|||
{height} |
|||
{topicLabel} |
|||
{shouldShowAllDataPoints} |
|||
{xAxisLabel} |
|||
{valueLabel} |
|||
{xAxisValueType} |
|||
{xAxisScale} |
|||
{xAxisCustomFormat} |
|||
{aspectRatio} |
|||
{grid} |
|||
tooltipThreshold={600} |
|||
{width} |
|||
{dateLabel} /> |
|||
|
|||
<!-- |
|||
|
|||
isAnimated={true} |
|||
aspectRatio={0.5} |
|||
grid='horizontal' |
|||
tooltipThreshold={600} |
|||
width={600} |
|||
dateLabel='fullDate' |
|||
|
|||
{type} |
|||
{data} |
|||
{colorSchema} |
|||
{axisTimeCombinations} |
|||
{lineCurve} |
|||
{numberFormat} |
|||
{height} |
|||
{topicLabel} |
|||
{shouldShowAllDataPoints} |
|||
{xAxisLabel} |
|||
{valueLabel} |
|||
{xAxisValueType} |
|||
{xAxisScale} |
|||
{xAxisCustomFormat} |
|||
|
|||
--> |
|||
@ -0,0 +1,3 @@ |
|||
export { default as donut } from "./Donut.svelte" |
|||
export { default as bar } from "./Bar.svelte" |
|||
export { default as line } from "./Line.svelte" |
|||
Loading…
Reference in new issue