mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-17 16:00:14 +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 {layoutColors, layoutPaths} from '../../../theme';
|
||||
import {BaThemeConfigProvider, colorHelper, layoutPaths} from '../../../theme';
|
||||
|
||||
@Injectable()
|
||||
export class LineChartService {
|
||||
|
||||
private _data = {
|
||||
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
|
||||
};
|
||||
constructor(private _baConfig:BaThemeConfigProvider) {
|
||||
}
|
||||
|
||||
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) => {
|
||||
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
|
||||
|
|
@ -33,19 +46,6 @@ export let mix = (color1, color2, weight) => {
|
|||
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 = {
|
||||
resWidthCollapseSidebar: 1200,
|
||||
resWidthHideSidebar: 500
|
||||
|
|
@ -116,14 +116,14 @@ let _colorsForChart = [layoutColors.primary, layoutColors.danger, layoutColors.w
|
|||
|
||||
_colorsForChart.forEach((color) => {
|
||||
_chartColors.push({
|
||||
fillColor: hexToRgbA(color, 0.2),
|
||||
strokeColor: hexToRgbA(color, 1),
|
||||
pointColor: hexToRgbA(color, 1),
|
||||
fillColor: colorHelper.hexToRgbA(color, 0.2),
|
||||
strokeColor: colorHelper.hexToRgbA(color, 1),
|
||||
pointColor: colorHelper.hexToRgbA(color, 1),
|
||||
pointStrokeColor: color,
|
||||
pointHighlightFill: color,
|
||||
pointHighlightStroke: hexToRgbA(color, 0.8),
|
||||
color: hexToRgbA(color, 1),
|
||||
highlight: hexToRgbA(color, 0.8)
|
||||
pointHighlightStroke: colorHelper.hexToRgbA(color, 0.8),
|
||||
color: colorHelper.hexToRgbA(color, 1),
|
||||
highlight: colorHelper.hexToRgbA(color, 0.8)
|
||||
});
|
||||
});
|
||||
export const chartColors = _chartColors;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue