mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 23:40:14 +01:00
temprorary removed charts.js until the library is not ready
This commit is contained in:
nixa
parent
630b1db4bc
commit
c81e0852b7
6 changed files with 0 additions and 204 deletions
|
|
@ -67,10 +67,6 @@ export const menuItems = [
|
|||
expanded: false,
|
||||
order: 400,
|
||||
subMenu: [
|
||||
// {
|
||||
// title: 'Chart Js',
|
||||
// component: 'ChartJs',
|
||||
// },
|
||||
{
|
||||
title: 'Chartist.Js',
|
||||
component: 'ChartistJs',
|
||||
|
|
|
|||
|
|
@ -1,71 +0,0 @@
|
|||
import {Component, ViewEncapsulation} from '@angular/core';
|
||||
import {BaCard} from '../../../../theme/components';
|
||||
|
||||
import {ChartJsService} from "./chartJs.service";
|
||||
|
||||
import {CHART_DIRECTIVES} from 'ng2-charts';
|
||||
import {chartColors} from "../../../../theme/theme.constants";
|
||||
|
||||
// TODO refactor after https://github.com/valor-software/ng2-charts/issues/186 is closed
|
||||
@Component({
|
||||
selector: 'chart-js',
|
||||
pipes: [],
|
||||
providers: [ChartJsService],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
styles: [require('./chartJs.scss')],
|
||||
directives: [BaCard, CHART_DIRECTIVES],
|
||||
template: require('./chartJs.html'),
|
||||
})
|
||||
export class ChartJs {
|
||||
|
||||
public labels = {
|
||||
one: ["Sleeping", "Designing", "Coding", "Cycling"],
|
||||
two: ["April", "May", "June", "Jule", "August", "September", "October", "November", "December"],
|
||||
three: ["May", "June", "Jule", "August", "September", "October", "November"]
|
||||
};
|
||||
public data = {
|
||||
one: [20, 40, 5, 35],
|
||||
two: [[1, 9, 3, 4, 5, 6, 7, 8, 2].map((e) => {return Math.sin(e) * 25 + 25})],
|
||||
three: [
|
||||
[65, 59, 90, 81, 56, 55, 40],
|
||||
[28, 48, 40, 19, 88, 27, 45]
|
||||
]
|
||||
};
|
||||
public series = ['Product A', 'Product B'];
|
||||
public colours = chartColors;
|
||||
public options = {
|
||||
scaleShowLabelBackdrop : false,
|
||||
segmentShowStroke : false,
|
||||
responsive: true,
|
||||
scaleFontColor: "rgba(255,255,255,.7)",
|
||||
scaleLineColor: "rgba(255,255,255,.7)",
|
||||
pointLabelFontColor: "rgba(255,255,255,.7)"
|
||||
};
|
||||
|
||||
constructor(private _chartJsService:ChartJsService) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
// var self = this;
|
||||
// setInterval(() => {
|
||||
//
|
||||
// var temp = [...this.data.two];
|
||||
// temp[0].unshift(temp[0].pop());
|
||||
// this.data.two = temp;
|
||||
//
|
||||
// }, 300);
|
||||
}
|
||||
|
||||
chartType(type) {
|
||||
return type;
|
||||
}
|
||||
|
||||
changeData ($event) {
|
||||
let shuffle = (o) => {
|
||||
for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x){}
|
||||
return o;
|
||||
};
|
||||
|
||||
this.data = shuffle(this.data);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<ba-card title="Pie" baCardClass="with-scroll">
|
||||
<base-chart class="chartjs chart chart-pie"
|
||||
[legend]="true" [colours]="colours" [options]="options" [data]="data.one" [chartType]="chartType('Pie')" [labels]="labels.one" (chartClick)="changeData($event)">
|
||||
</base-chart>
|
||||
</ba-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<ba-card title="Doughnut" baCardClass="with-scroll">
|
||||
<base-chart class="chartjs doughnut chart-doughnut"
|
||||
[legend]="true" [colours]="colours" [options]="options" [data]="data.one" [chartType]="chartType('Doughnut')" [labels]="labels.one" (chartClick)="changeData($event)">
|
||||
</base-chart>
|
||||
</ba-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<ba-card title="Polar" baCardClass="with-scroll">
|
||||
<base-chart class="chartjs polar chart-polar"
|
||||
[legend]="true" [colours]="colours" [options]="options" [data]="data.one" [chartType]="chartType('PolarArea')" [labels]="labels.one" (chartClick)="changeData($event)">
|
||||
</base-chart>
|
||||
</ba-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row ">
|
||||
<div class="col-md-6">
|
||||
<ba-card title="Animated Radar" baCardClass="with-scroll col-eq-height">
|
||||
<base-chart class="chartjs waveLine chart-waveLine"
|
||||
[legend]="false" [colours]="colours" [options]="options" [data]="data.two" [chartType]="chartType('Radar')" [labels]="labels.two" (chartClick)="changeData($event)">
|
||||
</base-chart>
|
||||
</ba-card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<ba-card title="Animated Bars" baCardClass="with-scroll col-eq-height">
|
||||
<base-chart class="chartjs waveBars chart-waveBars"
|
||||
[legend]="false" [colours]="colours" [options]="options" [data]="data.two" [chartType]="chartType('Bar')" [labels]="labels.two" (chartClick)="changeData($event)">
|
||||
</base-chart>
|
||||
</ba-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row ">
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<ba-card title="Radar" baCardClass="with-scroll">
|
||||
<base-chart id="radar" class="chartjs chart chart-radar"
|
||||
[legend]="false" [series]="series" [colours]="colours" [options]="options" [data]="data.three" [chartType]="chartType('Radar')" [labels]="labels.three" (chartClick)="changeData($event)">
|
||||
</base-chart>
|
||||
</ba-card>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<ba-card title="Line" baCardClass="with-scroll">
|
||||
<base-chart id="line" class="chartjs chart chart-line"
|
||||
[legend]="false" [series]="series" [colours]="colours" [options]="options" [data]="data.three" [chartType]="chartType('Line')" [labels]="labels.two" (chartClick)="changeData($event)">
|
||||
</base-chart>
|
||||
</ba-card>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-12">
|
||||
<ba-card title="Bars" baCardClass="with-scroll">
|
||||
<base-chart id="bar" class="chartjs chart chart-bar"
|
||||
[legend]="false" [series]="series" [colours]="colours" [options]="options" [data]="data.three" [chartType]="chartType('Bar')" [labels]="labels.two" (chartClick)="changeData($event)">
|
||||
</base-chart>
|
||||
</ba-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
.chartjs {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chart-legend,
|
||||
.bar-legend,
|
||||
.line-legend,
|
||||
.pie-legend,
|
||||
.radar-legend,
|
||||
.polararea-legend,
|
||||
.doughnut-legend {
|
||||
list-style-type: none;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
/* NOTE: Browsers automatically add 40px of padding-left to all lists, so we should offset that, otherwise the legend is off-center */
|
||||
-webkit-padding-start: 0;
|
||||
/* Webkit */
|
||||
-moz-padding-start: 0;
|
||||
/* Mozilla */
|
||||
padding-left: 0;
|
||||
/* IE (handles all cases, really, but we should also include the vendor-specific properties just to be safe) */
|
||||
}
|
||||
|
||||
.chart-legend li,
|
||||
.bar-legend li,
|
||||
.line-legend li,
|
||||
.pie-legend li,
|
||||
.radar-legend li,
|
||||
.polararea-legend li,
|
||||
.doughnut-legend li {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
margin-bottom: 4px;
|
||||
border-radius: 5px;
|
||||
padding: 2px 8px 2px 28px;
|
||||
font-size: smaller;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.chart-legend li span,
|
||||
.bar-legend li span,
|
||||
.line-legend li span,
|
||||
.pie-legend li span,
|
||||
.radar-legend li span,
|
||||
.polararea-legend li span,
|
||||
.doughnut-legend li span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import {Injectable} from '@angular/core';
|
||||
|
||||
@Injectable()
|
||||
export class ChartJsService {
|
||||
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
export * from './chartJs.component';
|
||||
Loading…
Add table
Add a link
Reference in a new issue