You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
1.8 KiB
JavaScript
74 lines
1.8 KiB
JavaScript
import "@vaadin/vaadin-charts/theme/vaadin-chart-default-theme";
|
|
|
|
const $_documentContainer = document.createElement('template');
|
|
|
|
$_documentContainer.innerHTML = `
|
|
<custom-style>
|
|
<style>
|
|
html {
|
|
}
|
|
</style>
|
|
</custom-style>
|
|
|
|
|
|
<custom-style>
|
|
<style>
|
|
vaadin-app-layout vaadin-tab a:hover {
|
|
text-decoration: none;
|
|
}
|
|
</style>
|
|
</custom-style>
|
|
|
|
<dom-module id="app-layout-theme" theme-for="vaadin-app-layout">
|
|
<template>
|
|
<style>
|
|
[part="navbar"] {
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
</style>
|
|
</template>
|
|
</dom-module>
|
|
|
|
<dom-module id="chart" theme-for="vaadin-chart">
|
|
<template>
|
|
<style include="vaadin-chart-default-theme">
|
|
:host {
|
|
--vaadin-charts-color-0: var(--lumo-primary-color);
|
|
--vaadin-charts-color-1: var(--lumo-error-color);
|
|
--vaadin-charts-color-2: var(--lumo-success-color);
|
|
--vaadin-charts-color-3: var(--lumo-contrast);
|
|
}
|
|
.highcharts-container {
|
|
font-family: var(--lumo-font-family);
|
|
}
|
|
.highcharts-background {
|
|
fill: var(--lumo-base-color);
|
|
}
|
|
.highcharts-title {
|
|
fill: var(--lumo-header-text-color);
|
|
font-size: var(--lumo-font-size-xl);
|
|
font-weight: 600;
|
|
line-height: var(--lumo-line-height-xs);
|
|
}
|
|
.highcharts-legend-item text {
|
|
fill: var(--lumo-body-text-color);
|
|
}
|
|
.highcharts-axis-title,
|
|
.highcharts-axis-labels {
|
|
fill: var(--lumo-secondary-text-color);
|
|
}
|
|
.highcharts-axis-line,
|
|
.highcharts-grid-line,
|
|
.highcharts-tick {
|
|
stroke: var(--lumo-contrast-10pct);
|
|
}
|
|
.highcharts-column-series rect.highcharts-point {
|
|
stroke: var(--lumo-base-color);
|
|
}
|
|
</style>
|
|
</template>
|
|
</dom-module>`;
|
|
|
|
document.head.appendChild($_documentContainer.content);
|