Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-17 07:50:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

lineChart style fixes

Browse source
This commit is contained in:
nixa 2016-05-16 17:53:52 +03:00
parent cd6290219f
commit e1de8880b6
2 changed files with 128 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/app/pages/dashboard/lineChart/lineChart.service.ts
View file

@ -1,10 +1,18 @@
import {Injectable} from '@angular/core';
import {layoutColors, layoutPaths} from '../../../theme';
import {BaThemeConfigProvider, colorHelper, layoutPaths} from '../../../theme';
@Injectable()
export class LineChartService {
private _data = {
constructor(private _baConfig:BaThemeConfigProvider) {
}
getData() {
var layoutColors = this._baConfig.get().colors;
var graphColor = this._baConfig.get().theme.blur ? '#000000' : layoutColors.primary;
return {
type: 'serial',
theme: 'blur',
marginTop: 15,
@ -48,15 +56,15 @@ export class LineChartService {
categoryAxis: {
parseDates: true,
gridAlpha: 0,
color: '#FFFFFF',
axisColor: '#FFFFFF'
color: layoutColors.defaultText,
axisColor: layoutColors.defaultText
},
valueAxes: [
{
minVerticalGap: 50,
gridAlpha: 0,
color: '#FFFFFF',
axisColor: '#FFFFFF'
color: layoutColors.defaultText,
axisColor: layoutColors.defaultText
}
],
graphs: [
@ -64,9 +72,9 @@ export class LineChartService {
id: 'g0',
bullet: 'none',
useLineColorForBulletBorder: true,
lineColor: 'rgba(0,0,0,0.15)',
lineColor: colorHelper.hexToRgbA(graphColor, 0.3),
lineThickness: 1,
negativeLineColor: 'rgba(0,0,0,0.15)',
negativeLineColor: layoutColors.danger,
type: 'smoothedLine',
valueField: 'value0',
fillAlphas: 1,
@ -76,9 +84,9 @@ export class LineChartService {
id: 'g1',
bullet: 'none',
useLineColorForBulletBorder: true,
lineColor: 'rgba(0,0,0,0.25)',
lineColor: colorHelper.hexToRgbA(graphColor, 0.5),
lineThickness: 1,
negativeLineColor: 'rgba(0,0,0,0.25)',
negativeLineColor: layoutColors.danger,
type: 'smoothedLine',
valueField: 'value',
fillAlphas: 1,
@ -106,8 +114,5 @@ export class LineChartService {
zoomOutText: '',
pathToImages: layoutPaths.images.amChart
};
getData() {
return this._data;
}
}

38
src/app/theme/theme.constants.ts
View file

@ -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;