fix(core): update

This commit is contained in:
Philipp Kunz 2024-02-03 14:42:20 +01:00
parent 2f7fdc16c7
commit 38b4df1ce3
3 changed files with 122 additions and 20 deletions

View File

@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@design.estate/dees-catalog',
version: '1.0.279',
version: '1.0.280',
description: 'website for lossless.com'
}

View File

@ -12,7 +12,9 @@ export const demoFunc = () => {
}
</style>
<div class="demoBox">
<dees-chart-area></dees-chart-area>
<dees-chart-area
.title=${'System Usage'}
></dees-chart-area>
</div>
`;
};

View File

@ -5,6 +5,7 @@ import {
customElement,
html,
property,
state,
type CSSResult,
type TemplateResult,
} from '@design.estate/dees-element';
@ -24,50 +25,95 @@ declare global {
export class DeesChartArea extends DeesElement {
public static demo = demoFunc;
// instance
@state()
public chart: ApexCharts;
@property()
public title: string = 'Untitled Chart';
constructor() {
super();
domtools.elementBasic.setup();
}
public static styles = [cssManager.defaultStyles, css`
.mainbox {
width: 600px;
height: 600px;
background: #222;
border-radius: 3px;
padding: 16px;
padding-top: 32px;
public static styles = [
cssManager.defaultStyles,
css`
:host {
font-family: 'Roboto', sans-serif;
color: #ccc;
font-weight: 600;
font-size: 12px;
}
`];
.mainbox {
position: relative;
width: 100%;
max-width: 600px;
height: 400px;
background: #222;
border-radius: 8px;
padding: 32px 16px 16px 0px;
}
.chartTitle {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
padding-top: 16px;
}
.chartContainer {
position: relative;
width: 100%;
height: 100%;
}
`,
];
public render(): TemplateResult {
return html` <div class="mainbox"></div> `;
return html` <div class="mainbox">
<div class="chartTitle">${this.title}</div>
<div class="chartContainer"></div>
</div> `;
}
public async firstUpdated() {
var options = {
const domtoolsInstance = await this.domtoolsPromise;
var options: ApexCharts.ApexOptions = {
series: [
{
name: 'series1',
name: 'cpu',
data: [31, 40, 28, 51, 42, 109, 100],
},
{
name: 'series2',
name: 'memory',
data: [11, 32, 45, 32, 34, 52, 41],
},
],
chart: {
width: 560,
height: 540,
width: 0, // Adjusted for responsive width
height: 0, // Adjusted for responsive height
type: 'area',
toolbar: {
show: false, // This line disables the toolbar
},
},
dataLabels: {
enabled: false,
},
stroke: {
width: 1,
curve: 'smooth',
},
xaxis: {
crosshairs: {
stroke: {
width: 1,
color: '#444',
},
},
type: 'datetime',
categories: [
'2018-09-19T00:00:00.000Z',
@ -79,14 +125,68 @@ export class DeesChartArea extends DeesElement {
'2018-09-19T06:30:00.000Z',
],
},
yaxis: {
crosshairs: {
stroke: {
width: 1,
color: '#444',
},
},
},
tooltip: {
x: {
format: 'dd/MM/yy HH:mm',
},
},
grid: {
xaxis: {
lines: {
show: true, // This enables the grid lines along the x-axis
},
},
yaxis: {
lines: {
show: true,
},
},
borderColor: '#666', // Set the color of the grid lines
strokeDashArray: 2, // Solid line
row: {
colors: [], // This can be used to alternate the shading of the horizontal rows
opacity: 0.1,
},
column: {
colors: [], // For vertical column bands, not needed here but available for customization
opacity: 0.1,
},
},
};
this.chart = new ApexCharts(this.shadowRoot.querySelector('.chartContainer'), options);
await this.chart.render();
await this.resizeChart();
}
var chart = new ApexCharts(this.shadowRoot.querySelector('.mainbox'), options);
chart.render();
public async resizeChart() {
const element = this.shadowRoot.querySelector('.chartContainer');
// Get computed style of the element
const style = window.getComputedStyle(element);
// Extract padding values
const paddingTop = parseInt(style.paddingTop, 10);
const paddingBottom = parseInt(style.paddingBottom, 10);
const paddingLeft = parseInt(style.paddingLeft, 10);
const paddingRight = parseInt(style.paddingRight, 10);
// Calculate the actual width and height to use, subtracting padding
const actualWidth = element.clientWidth - paddingLeft - paddingRight;
const actualHeight = element.clientHeight - paddingTop - paddingBottom;
await this.chart.updateOptions({
chart: {
width: actualWidth,
height: actualHeight,
},
});
}
}