mirror of https://github.com/Budibase/budibase.git
Conor_Mack
6 years ago
committed by
GitHub
GitHub
16 changed files with 1032 additions and 482 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,81 @@ |
|||
<script> |
|||
import { notNull } from "./utils" |
|||
import { onMount } from "svelte" |
|||
import { select } from "d3-selection" |
|||
|
|||
import britecharts from "britecharts" |
|||
|
|||
export const tooltip = britecharts.tooltip() |
|||
|
|||
export let chartClass = "" |
|||
let tooltipContainer |
|||
|
|||
export let axisTimeCombinations = null |
|||
export let dateCustomFormat = null |
|||
export let dateFormat = null |
|||
export let dateLabel = null |
|||
export let locale = null |
|||
export let nameLabel = null |
|||
export let numberFormat = null |
|||
export let shouldShowDateInTitle = false |
|||
export let title = "My Tooltip" |
|||
export let tooltipOffset = null |
|||
export let topicLabel = "values" |
|||
export let topicsOrder = null |
|||
export let valueLabel = null |
|||
export let xAxisValueType = null |
|||
|
|||
onMount(() => { |
|||
tooltipContainer = select( |
|||
`.${chartClass} .metadata-group .vertical-marker-container` |
|||
) |
|||
tooltipContainer.datum([]).call(tooltip) |
|||
}) |
|||
|
|||
$: if (tooltipContainer) { |
|||
if (notNull(axisTimeCombinations)) { |
|||
tooltip.axisTimeCombinations(axisTimeCombinations) |
|||
} |
|||
if (notNull(dateCustomFormat)) { |
|||
tooltip.dateCustomFormat(dateCustomFormat) |
|||
} |
|||
if (notNull(dateFormat)) { |
|||
tooltip.dateFormat(dateFormat) |
|||
} |
|||
if (notNull(dateLabel)) { |
|||
tooltip.dateLabel(dateLabel) |
|||
} |
|||
if (notNull(locale)) { |
|||
tooltip.locale(locale) |
|||
} |
|||
if (notNull(nameLabel)) { |
|||
tooltip.nameLabel(nameLabel) |
|||
} |
|||
if (notNull(numberFormat)) { |
|||
tooltip.numberFormat(numberFormat) |
|||
} |
|||
if (notNull(shouldShowDateInTitle)) { |
|||
tooltip.shouldShowDateInTitle(shouldShowDateInTitle) |
|||
} |
|||
if (notNull(title)) { |
|||
tooltip.title(title) |
|||
} |
|||
if (notNull(tooltipOffset)) { |
|||
tooltip.tooltipOffset(tooltipOffset) |
|||
} |
|||
if (notNull(topicLabel)) { |
|||
tooltip.topicLabel(topicLabel) |
|||
} |
|||
if (notNull(topicsOrder)) { |
|||
tooltip.topicsOrder(topicsOrder) |
|||
} |
|||
if (notNull(valueLabel)) { |
|||
tooltip.valueLabel(valueLabel) |
|||
} |
|||
if (notNull(xAxisValueType)) { |
|||
tooltip.xAxisValueType(xAxisValueType) |
|||
} |
|||
|
|||
tooltipContainer.datum([]).call(tooltip) |
|||
} |
|||
</script> |
|||
@ -0,0 +1,235 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
<title>HTML Line</title> |
|||
|
|||
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-selection/1.2.0/d3-selection.js"></script> |
|||
<!-- <script src="https://cdn.jsdelivr.net/npm/britecharts@2.10.0/dist/umd/line.min.js" |
|||
type="text/javascript"></script> --> |
|||
|
|||
<script src="../../../node_modules/britecharts/dist/umd/line.min.js" type="text/javascript"></script> |
|||
<script src="../../../node_modules/britecharts/dist/umd/tooltip.min.js" type="text/javascript"></script> |
|||
|
|||
|
|||
|
|||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/britecharts/dist/css/britecharts.min.css" type="text/css" /> |
|||
</head> |
|||
<body> |
|||
|
|||
<article> |
|||
<div class="js-line-chart-container line-chart-container card--chart"></div> |
|||
</article> |
|||
|
|||
<script> |
|||
|
|||
const testData = { |
|||
data: [ |
|||
{ |
|||
amount: 8, |
|||
audited: new Date("2020-01-01T16:00:00-08:00"), |
|||
city: "Belfast", |
|||
name: 1, |
|||
modelId: "2334751ac0764c1a931bff5b6b6767eb", |
|||
type: "record", |
|||
_id: "ceb87054790f480e80512368545755bb", |
|||
_rev: "2-56e401ebaf59e6310b85fb0c6c2fece5", |
|||
}, |
|||
{ |
|||
amount: 12, |
|||
audited: new Date("2020-01-03T16:00:00-08:00"), |
|||
city: "Belfast", |
|||
name: 1, |
|||
modelId: "2334751ac0764c1a931bff5b6b6767eb", |
|||
type: "record", |
|||
_id: "0a36103b55124f348a23d10b2f3ed0e3", |
|||
_rev: "2-50d62530b2edfc63d5fd0b3719dbb286", |
|||
}, |
|||
{ |
|||
amount: 6, |
|||
audited: new Date("2020-01-04T16:00:00-08:00"), |
|||
city: "Belfast", |
|||
name: 1, |
|||
modelId: "2334751ac0764c1a931bff5b6b6767eb", |
|||
type: "record", |
|||
_id: "68ade2bb94754caa8fc62c7084e3cef7", |
|||
_rev: "2-a03fe02f3595920adfbcd9c70564fe9d", |
|||
}, |
|||
{ |
|||
amount: 2, |
|||
audited: new Date("2020-01-01T16:00:00-08:00"), |
|||
city: "Dublin", |
|||
name: 2, |
|||
modelId: "2334751ac0764c1a931bff5b6b6767eb", |
|||
type: "record", |
|||
_id: "2ab6dabf833f4d99b3438fa4353ba429", |
|||
_rev: "2-45b190489e76842981902cc9f04369ec", |
|||
}, |
|||
{ |
|||
amount: 16, |
|||
audited: new Date("2020-01-02T16:00:00-08:00"), |
|||
city: "Dublin", |
|||
name: 2, |
|||
modelId: "2334751ac0764c1a931bff5b6b6767eb", |
|||
type: "record", |
|||
_id: "1b2ca36db1724427a98ba95547f946e0", |
|||
_rev: "2-c43def17ada959948b9af5484ad5b6b7", |
|||
}, |
|||
{ |
|||
amount: 7, |
|||
audited: new Date("2020-01-03T16:00:00-08:00"), |
|||
city: "Dublin", |
|||
name: 2, |
|||
modelId: "2334751ac0764c1a931bff5b6b6767eb", |
|||
type: "record", |
|||
_id: "d9235d884a224ca68ac30cefdbb8ae53", |
|||
_rev: "2-695e426a261a25474cbf6b1f069dccb4", |
|||
}, |
|||
{ |
|||
amount: 3, |
|||
audited: new Date("2020-01-04T16:00:00-08:00"), |
|||
city: "Dublin", |
|||
name: 2, |
|||
modelId: "2334751ac0764c1a931bff5b6b6767eb", |
|||
type: "record", |
|||
_id: "9f8bc39a9cfb4f779da8c998d7622927", |
|||
_rev: "2-8ae1aff82e1ffc6ffa75f6b9d074e003", |
|||
}, |
|||
{ |
|||
amount: 4, |
|||
audited: new Date("2020-01-02T16:00:00-08:00"), |
|||
city: "London", |
|||
name: 3, |
|||
modelId: "2334751ac0764c1a931bff5b6b6767eb", |
|||
type: "record", |
|||
_id: "75274e906073493bbf75cda8656e8db0", |
|||
_rev: "2-6cfc6bb2fccb83c92b50aa5507f2a092" |
|||
}, |
|||
{ |
|||
amount: 22, |
|||
audited: new Date("2020-01-06T16:00:00-08:00"), |
|||
city: "London", |
|||
name: 3, |
|||
modelId: "2334751ac0764c1a931bff5b6b6767eb", |
|||
type: "record", |
|||
_id: "da3d4b151bc641f4ace487a2314d2550", |
|||
_rev: "2-ac18490eaa016be0e71bd4c4ea332981", |
|||
} |
|||
] |
|||
} |
|||
|
|||
const topicLabel = "city" |
|||
const valueLabel = "amount" |
|||
const dateLabel = "audited" |
|||
|
|||
function prepareData() { |
|||
let dataByTopic = [] |
|||
testData.data.forEach((data, idx, arr) => { |
|||
let topicName = data[topicLabel] |
|||
if(!dataByTopic.some(dt => dt.topicName === topicName)) { |
|||
let d = {topicName, topic: dataByTopic.length + 1, dates: arr.filter(d => d[topicLabel] === topicName).map(d => ({date: d[dateLabel], value: d[valueLabel]}))} |
|||
dataByTopic.push(d) |
|||
} |
|||
}) |
|||
return {dataByTopic} |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
const newData = prepareData() |
|||
|
|||
const dataByTopic = { |
|||
dataByTopic: [ |
|||
{ |
|||
topicName: 'San Francisco', |
|||
topic: 123, |
|||
dates: [ |
|||
{ |
|||
date: '2017-01-16T16:00:00-08:00', |
|||
value: 1 |
|||
}, |
|||
{ |
|||
date: '2017-01-16T17:00:00-08:00', |
|||
value: 2 |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
topicName: 'Belfast', |
|||
topic: 456, |
|||
dates: [ |
|||
{ |
|||
date: '2017-01-16T16:00:00-08:00', |
|||
value: 5 |
|||
}, |
|||
{ |
|||
date: '2017-01-16T17:00:00-08:00', |
|||
value: 8 |
|||
} |
|||
] |
|||
} |
|||
] |
|||
} |
|||
|
|||
const data = { |
|||
data: [ |
|||
{ |
|||
topicName: "Oakland", |
|||
name: 2, |
|||
date: "2017-01-16T16:00:00-08:00", |
|||
value: 3, |
|||
}, |
|||
{ |
|||
topicName: "Oakland", |
|||
name: 2, |
|||
date: "2017-01-17T16:00:00-08:00", |
|||
value: 7, |
|||
}, |
|||
{ |
|||
topicName: "Oakland", |
|||
name: 2, |
|||
date: "2017-01-18T16:00:00-08:00", |
|||
value: 5, |
|||
}, |
|||
{ |
|||
topicName: "Oakland", |
|||
name: 2, |
|||
date: "2017-01-19T16:00:00-08:00", |
|||
value: 6, |
|||
}, |
|||
{ |
|||
topicName: "Oakland", |
|||
name: 2, |
|||
date: "2017-01-20T16:00:00-08:00", |
|||
value: 1, |
|||
}, |
|||
], |
|||
} |
|||
|
|||
const lineContainer = d3.select('.js-line-chart-container'); |
|||
|
|||
const lineChart = britecharts.line() |
|||
const tooltip = britecharts.tooltip() |
|||
|
|||
lineChart.grid("horizontal").aspectRatio(0.5).isAnimated(true).shouldShowAllDataPoints(true) |
|||
|
|||
lineContainer.datum(newData).call(lineChart); |
|||
|
|||
const tooltipContainer = d3.select(`.js-line-chart-container .metadata-group .vertical-marker-container`) |
|||
|
|||
tooltip.title("yeooo") |
|||
tooltip.topicLabel("topics") |
|||
lineChart.on("customMouseOver", tooltip.show) |
|||
lineChart.on("customMouseMove", tooltip.update) |
|||
lineChart.on("customMouseOut", tooltip.hide) |
|||
|
|||
|
|||
tooltipContainer.datum([]).call(tooltip) |
|||
|
|||
|
|||
</script> |
|||
|
|||
</body> |
|||
</html> |
|||
Loading…
Reference in new issue