mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-17 07:50:12 +01:00
lineChart style fixes
This commit is contained in:
nixa
parent
cd6290219f
commit
e1de8880b6
2 changed files with 128 additions and 123 deletions
|
|
@ -1,113 +1,118 @@
|
||||||
import {Injectable} from '@angular/core';
|
import {Injectable} from '@angular/core';
|
||||||
import {layoutColors, layoutPaths} from '../../../theme';
|
import {BaThemeConfigProvider, colorHelper, layoutPaths} from '../../../theme';
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class LineChartService {
|
export class LineChartService {
|
||||||
|
|
||||||
private _data = {
|
constructor(private _baConfig:BaThemeConfigProvider) {
|
||||||
type: 'serial',
|
}
|
||||||
theme: 'blur',
|
|
||||||
marginTop: 15,
|
|
||||||
marginRight: 15,
|
|
||||||
responsive: {
|
|
||||||
'enabled': true
|
|
||||||
},
|
|
||||||
dataProvider: [
|
|
||||||
{ date: new Date(2012, 11), value: 0, value0: 0 },
|
|
||||||
{ date: new Date(2013, 0), value: 15000, value0: 19000},
|
|
||||||
{ date: new Date(2013, 1), value: 30000, value0: 20000},
|
|
||||||
|
|
||||||
|
|
||||||
{ date: new Date(2013, 2), value: 25000, value0: 22000},
|
|
||||||
{ date: new Date(2013, 3), value: 21000, value0: 25000},
|
|
||||||
{ date: new Date(2013, 4), value: 24000, value0: 29000},
|
|
||||||
{ date: new Date(2013, 5), value: 31000, value0: 26000},
|
|
||||||
{ date: new Date(2013, 6), value: 40000, value0: 25000},
|
|
||||||
{ date: new Date(2013, 7), value: 37000, value0: 20000},
|
|
||||||
{ date: new Date(2013, 8), value: 18000, value0: 22000},
|
|
||||||
{ date: new Date(2013, 9), value: 5000, value0: 26000},
|
|
||||||
{ date: new Date(2013, 10), value: 40000, value0: 30000},
|
|
||||||
{ date: new Date(2013, 11), value: 20000, value0: 25000},
|
|
||||||
{ date: new Date(2014, 0), value: 5000, value0: 13000},
|
|
||||||
|
|
||||||
{ date: new Date(2014, 1), value: 3000, value0: 13000},
|
|
||||||
{ date: new Date(2014, 2), value: 1800, value0: 13000},
|
|
||||||
{ date: new Date(2014, 3), value: 10400, value0: 13000},
|
|
||||||
{ date: new Date(2014, 4), value: 25500, value0: 13000},
|
|
||||||
{ date: new Date(2014, 5), value: 2100, value0: 13000},
|
|
||||||
{ date: new Date(2014, 6), value: 6500, value0: 13000},
|
|
||||||
{ date: new Date(2014, 7), value: 1100, value0: 13000},
|
|
||||||
{ date: new Date(2014, 8), value: 17200, value0: 13000},
|
|
||||||
{ date: new Date(2014, 9), value: 26900, value0: 13000},
|
|
||||||
{ date: new Date(2014, 10), value: 14100, value0: 13000},
|
|
||||||
{ date: new Date(2014, 11), value: 35300, value0: 13000},
|
|
||||||
{ date: new Date(2015, 0), value: 54800, value0: 13000},
|
|
||||||
{ date: new Date(2015, 1), value: 49800, value0: 13000}
|
|
||||||
],
|
|
||||||
categoryField: 'date',
|
|
||||||
categoryAxis: {
|
|
||||||
parseDates: true,
|
|
||||||
gridAlpha: 0,
|
|
||||||
color: '#FFFFFF',
|
|
||||||
axisColor: '#FFFFFF'
|
|
||||||
},
|
|
||||||
valueAxes: [
|
|
||||||
{
|
|
||||||
minVerticalGap: 50,
|
|
||||||
gridAlpha: 0,
|
|
||||||
color: '#FFFFFF',
|
|
||||||
axisColor: '#FFFFFF'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
graphs: [
|
|
||||||
{
|
|
||||||
id: 'g0',
|
|
||||||
bullet: 'none',
|
|
||||||
useLineColorForBulletBorder: true,
|
|
||||||
lineColor: 'rgba(0,0,0,0.15)',
|
|
||||||
lineThickness: 1,
|
|
||||||
negativeLineColor: 'rgba(0,0,0,0.15)',
|
|
||||||
type: 'smoothedLine',
|
|
||||||
valueField: 'value0',
|
|
||||||
fillAlphas: 1,
|
|
||||||
fillColorsField: 'lineColor'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'g1',
|
|
||||||
bullet: 'none',
|
|
||||||
useLineColorForBulletBorder: true,
|
|
||||||
lineColor: 'rgba(0,0,0,0.25)',
|
|
||||||
lineThickness: 1,
|
|
||||||
negativeLineColor: 'rgba(0,0,0,0.25)',
|
|
||||||
type: 'smoothedLine',
|
|
||||||
valueField: 'value',
|
|
||||||
fillAlphas: 1,
|
|
||||||
fillColorsField: 'lineColor'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
chartCursor: {
|
|
||||||
categoryBalloonDateFormat: 'MM YYYY',
|
|
||||||
categoryBalloonColor: '#4285F4',
|
|
||||||
categoryBalloonAlpha: 0.7,
|
|
||||||
cursorAlpha: 0,
|
|
||||||
valueLineEnabled: true,
|
|
||||||
valueLineBalloonEnabled: true,
|
|
||||||
valueLineAlpha: 0.5
|
|
||||||
},
|
|
||||||
dataDateFormat: 'MM YYYY',
|
|
||||||
export: {
|
|
||||||
enabled: true
|
|
||||||
},
|
|
||||||
creditsPosition: 'bottom-right',
|
|
||||||
zoomOutButton: {
|
|
||||||
backgroundColor: '#fff',
|
|
||||||
backgroundAlpha: 0
|
|
||||||
},
|
|
||||||
zoomOutText: '',
|
|
||||||
pathToImages: layoutPaths.images.amChart
|
|
||||||
};
|
|
||||||
|
|
||||||
getData() {
|
getData() {
|
||||||
return this._data;
|
|
||||||
|
var layoutColors = this._baConfig.get().colors;
|
||||||
|
var graphColor = this._baConfig.get().theme.blur ? '#000000' : layoutColors.primary;
|
||||||
|
|
||||||
|
return {
|
||||||
|
type: 'serial',
|
||||||
|
theme: 'blur',
|
||||||
|
marginTop: 15,
|
||||||
|
marginRight: 15,
|
||||||
|
responsive: {
|
||||||
|
'enabled': true
|
||||||
|
},
|
||||||
|
dataProvider: [
|
||||||
|
{ date: new Date(2012, 11), value: 0, value0: 0 },
|
||||||
|
{ date: new Date(2013, 0), value: 15000, value0: 19000},
|
||||||
|
{ date: new Date(2013, 1), value: 30000, value0: 20000},
|
||||||
|
|
||||||
|
|
||||||
|
{ date: new Date(2013, 2), value: 25000, value0: 22000},
|
||||||
|
{ date: new Date(2013, 3), value: 21000, value0: 25000},
|
||||||
|
{ date: new Date(2013, 4), value: 24000, value0: 29000},
|
||||||
|
{ date: new Date(2013, 5), value: 31000, value0: 26000},
|
||||||
|
{ date: new Date(2013, 6), value: 40000, value0: 25000},
|
||||||
|
{ date: new Date(2013, 7), value: 37000, value0: 20000},
|
||||||
|
{ date: new Date(2013, 8), value: 18000, value0: 22000},
|
||||||
|
{ date: new Date(2013, 9), value: 5000, value0: 26000},
|
||||||
|
{ date: new Date(2013, 10), value: 40000, value0: 30000},
|
||||||
|
{ date: new Date(2013, 11), value: 20000, value0: 25000},
|
||||||
|
{ date: new Date(2014, 0), value: 5000, value0: 13000},
|
||||||
|
|
||||||
|
{ date: new Date(2014, 1), value: 3000, value0: 13000},
|
||||||
|
{ date: new Date(2014, 2), value: 1800, value0: 13000},
|
||||||
|
{ date: new Date(2014, 3), value: 10400, value0: 13000},
|
||||||
|
{ date: new Date(2014, 4), value: 25500, value0: 13000},
|
||||||
|
{ date: new Date(2014, 5), value: 2100, value0: 13000},
|
||||||
|
{ date: new Date(2014, 6), value: 6500, value0: 13000},
|
||||||
|
{ date: new Date(2014, 7), value: 1100, value0: 13000},
|
||||||
|
{ date: new Date(2014, 8), value: 17200, value0: 13000},
|
||||||
|
{ date: new Date(2014, 9), value: 26900, value0: 13000},
|
||||||
|
{ date: new Date(2014, 10), value: 14100, value0: 13000},
|
||||||
|
{ date: new Date(2014, 11), value: 35300, value0: 13000},
|
||||||
|
{ date: new Date(2015, 0), value: 54800, value0: 13000},
|
||||||
|
{ date: new Date(2015, 1), value: 49800, value0: 13000}
|
||||||
|
],
|
||||||
|
categoryField: 'date',
|
||||||
|
categoryAxis: {
|
||||||
|
parseDates: true,
|
||||||
|
gridAlpha: 0,
|
||||||
|
color: layoutColors.defaultText,
|
||||||
|
axisColor: layoutColors.defaultText
|
||||||
|
},
|
||||||
|
valueAxes: [
|
||||||
|
{
|
||||||
|
minVerticalGap: 50,
|
||||||
|
gridAlpha: 0,
|
||||||
|
color: layoutColors.defaultText,
|
||||||
|
axisColor: layoutColors.defaultText
|
||||||
|
}
|
||||||
|
],
|
||||||
|
graphs: [
|
||||||
|
{
|
||||||
|
id: 'g0',
|
||||||
|
bullet: 'none',
|
||||||
|
useLineColorForBulletBorder: true,
|
||||||
|
lineColor: colorHelper.hexToRgbA(graphColor, 0.3),
|
||||||
|
lineThickness: 1,
|
||||||
|
negativeLineColor: layoutColors.danger,
|
||||||
|
type: 'smoothedLine',
|
||||||
|
valueField: 'value0',
|
||||||
|
fillAlphas: 1,
|
||||||
|
fillColorsField: 'lineColor'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'g1',
|
||||||
|
bullet: 'none',
|
||||||
|
useLineColorForBulletBorder: true,
|
||||||
|
lineColor: colorHelper.hexToRgbA(graphColor, 0.5),
|
||||||
|
lineThickness: 1,
|
||||||
|
negativeLineColor: layoutColors.danger,
|
||||||
|
type: 'smoothedLine',
|
||||||
|
valueField: 'value',
|
||||||
|
fillAlphas: 1,
|
||||||
|
fillColorsField: 'lineColor'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
chartCursor: {
|
||||||
|
categoryBalloonDateFormat: 'MM YYYY',
|
||||||
|
categoryBalloonColor: '#4285F4',
|
||||||
|
categoryBalloonAlpha: 0.7,
|
||||||
|
cursorAlpha: 0,
|
||||||
|
valueLineEnabled: true,
|
||||||
|
valueLineBalloonEnabled: true,
|
||||||
|
valueLineAlpha: 0.5
|
||||||
|
},
|
||||||
|
dataDateFormat: 'MM YYYY',
|
||||||
|
export: {
|
||||||
|
enabled: true
|
||||||
|
},
|
||||||
|
creditsPosition: 'bottom-right',
|
||||||
|
zoomOutButton: {
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
backgroundAlpha: 0
|
||||||
|
},
|
||||||
|
zoomOutText: '',
|
||||||
|
pathToImages: layoutPaths.images.amChart
|
||||||
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,19 @@ export class colorHelper {
|
||||||
static tint = (color, weight) => {
|
static tint = (color, weight) => {
|
||||||
return mix('#ffffff', color, weight);
|
return mix('#ffffff', color, weight);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
static hexToRgbA = (hex, alpha) => {
|
||||||
|
var c;
|
||||||
|
if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
|
||||||
|
c = hex.substring(1).split('');
|
||||||
|
if (c.length == 3) {
|
||||||
|
c = [c[0], c[0], c[1], c[1], c[2], c[2]];
|
||||||
|
}
|
||||||
|
c = '0x' + c.join('');
|
||||||
|
return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',' + alpha + ')';
|
||||||
|
}
|
||||||
|
throw new Error('Bad Hex');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//SASS mix function
|
//SASS mix function
|
||||||
|
|
@ -33,19 +46,6 @@ export let mix = (color1, color2, weight) => {
|
||||||
return result;
|
return result;
|
||||||
};
|
};
|
||||||
|
|
||||||
export let hexToRgbA = (hex, alpha) => {
|
|
||||||
var c;
|
|
||||||
if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
|
|
||||||
c = hex.substring(1).split('');
|
|
||||||
if (c.length == 3) {
|
|
||||||
c = [c[0], c[0], c[1], c[1], c[2], c[2]];
|
|
||||||
}
|
|
||||||
c = '0x' + c.join('');
|
|
||||||
return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',' + alpha + ')';
|
|
||||||
}
|
|
||||||
throw new Error('Bad Hex');
|
|
||||||
};
|
|
||||||
|
|
||||||
export const layoutSizes = {
|
export const layoutSizes = {
|
||||||
resWidthCollapseSidebar: 1200,
|
resWidthCollapseSidebar: 1200,
|
||||||
resWidthHideSidebar: 500
|
resWidthHideSidebar: 500
|
||||||
|
|
@ -116,14 +116,14 @@ let _colorsForChart = [layoutColors.primary, layoutColors.danger, layoutColors.w
|
||||||
|
|
||||||
_colorsForChart.forEach((color) => {
|
_colorsForChart.forEach((color) => {
|
||||||
_chartColors.push({
|
_chartColors.push({
|
||||||
fillColor: hexToRgbA(color, 0.2),
|
fillColor: colorHelper.hexToRgbA(color, 0.2),
|
||||||
strokeColor: hexToRgbA(color, 1),
|
strokeColor: colorHelper.hexToRgbA(color, 1),
|
||||||
pointColor: hexToRgbA(color, 1),
|
pointColor: colorHelper.hexToRgbA(color, 1),
|
||||||
pointStrokeColor: color,
|
pointStrokeColor: color,
|
||||||
pointHighlightFill: color,
|
pointHighlightFill: color,
|
||||||
pointHighlightStroke: hexToRgbA(color, 0.8),
|
pointHighlightStroke: colorHelper.hexToRgbA(color, 0.8),
|
||||||
color: hexToRgbA(color, 1),
|
color: colorHelper.hexToRgbA(color, 1),
|
||||||
highlight: hexToRgbA(color, 0.8)
|
highlight: colorHelper.hexToRgbA(color, 0.8)
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
export const chartColors = _chartColors;
|
export const chartColors = _chartColors;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue