Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-02-12 03:14:20 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(charts): integrate js theme with echarts

Browse source
This commit is contained in:
Alexander Zhukov 2017-07-27 17:21:38 +03:00
parent eef4d0633c
commit d464d1060b
14 changed files with 675 additions and 543 deletions
Download patch file Download diff file Expand all files Collapse all files

89
src/app/@theme/styles/theme.cosmic.ts Normal file
View file

@ -0,0 +1,89 @@
export const COSMIC_THEME = {
name: 'cosmic',
base: 'default',
variables: {
tempColorGreen: '#7bff24',
tempColorLightBlue: '#31ffad',
tempColorBlue: '#2ec7fe',
tempColorYellow: '#fff024',
tempColorOrange: '#f7bd59',
solarColorDarkGreen: '#19977E',
solarColorShadow: 'rgba(0, 217, 119, 0.3)',
trafficColorBlack: '#000000',
trafficTooltipBg: 'rgba(0, 255, 170, 0.35)',
trafficLineBg: 'rgba(146, 141, 255, 0.5)',
trafficShadowLineBg: '#bdbaff',
trafficShadowLineDarkBg: '#a695ff',
trafficShadowLineShadow: 'rgba(33, 7, 77, 0.5)',
trafficGradFrom: 'rgba(118, 89, 255, 0.4)',
trafficGradTo: 'rgba(164, 84, 255, 0.5)',
electricityAxisColor: '#a1a1e5',
electricityLineGradFrom: '#00ffaa',
electricityLineGradTo: '#fff835',
electricityLineShadow: 'rgba(14, 16, 48, 0.4)',
electricityAreaGradFrom: 'rgba(188, 92, 255, 0.5)',
electricityAreaGradTo: 'rgba(188, 92, 255, 0)',
bubbleMapTitleColor: '#ffffff',
bubbleMapGeoColor1: '#e6b045',
bubbleMapGeoColor2: '#0088ff',
bubbleMapGeoColor3: '#ff386a',
bubbleMapGeoColor4: '#00d977',
bubbleMapGeoColor5: '#7659ff',
bubbleMapGeoColor6: '#24dec8',
bubbleMapAreaColor: '#2c2961',
bubbleMapAreaHoverColor: '#a1a1e5',
bubbleMapAreaBorderColor: '#654ddb',
echartsBackgroundColor: '#363175',
echartsPieColor1: 'rgb(168, 56, 93)',
echartsPieColor2: 'rgb(122, 163, 229)',
echartsPieColor3: 'rgb(170, 227, 245)',
echartsPieColor4: 'rgb(173, 205, 237)',
echartsPieColor5: 'rgb(162, 126, 168)',
echartsPieLegendTextColor: 'white',
echartsPieItemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
echartsBarColor1: '#3398DB',
echartsBarXAxisLineColor: 'white',
echartsBarYAxisLineColor: 'white',
echartsLineColor1: 'red',
echartsLineColor2: 'black',
echartsLineColor3: 'white',
echartsLineLegendTextColor: 'white',
echartsLineXAxisLineColor: 'white',
echartsLineYAxisLineColor: 'white',
echartsMultipleXAxisColor1: '#5793f3',
echartsMultipleXAxisColor2: '#d14a61',
echartsMultipleXAxisColor3: '#675bba',
echartsMultipleXAxisLegendTextColor: 'white',
echartsMultipleXAxisYAxisLineColor: 'white',
echartsAreaStackColor1: 'red',
echartsAreaStackColor2: 'blue',
echartsAreaStackColor3: 'purple',
echartsAreaStackColor4: 'yellow',
echartsAreaStackColor5: 'pink',
echartsAreaStackLegendTextColor: 'white',
echartsAreaStackXAxisLineColor: 'white',
echartsAreaStackYAxisLineColor: 'white',
echartsAreaStackTooltipBackgroundColor: '#6a7985',
echartsBarAnimationColor1: 'red',
echartsBarAnimationColor2: 'white',
echartsBarAnimationLegendTextColor: 'white',
echartsBarAnimationXAxisLineColor: 'white',
echartsBarAnimationYAxisLineColor: 'white',
echartsRadarColor1: 'red',
echartsRadarColor2: 'white',
echartsRadarLegendTextColor: 'white',
echartsRadarNameTextColor: 'white',
echartsRadarSplitAreaStyleColor: 'transparent',
},
};

40
src/app/@theme/styles/theme.default.ts Normal file
View file

@ -0,0 +1,40 @@
export const DEFAULT_THEME = {
name: 'default',
base: 'default',
variables: {
tempColorGreen: '#7bff24',
tempColorLightBlue: '#7bff24',
tempColorBlue: '#7bff24',
tempColorYellow: '#7bff24',
tempColorOrange: '#7bff24',
solarColorDarkGreen: '#7bff24',
solarColorShadow: 'rgba(0, 217, 119, 0.3)',
trafficColorBlack: '#7bff24',
trafficTooltipBg: 'rgba(0, 255, 170, 0.35)',
trafficLineBg: 'rgba(146, 141, 255, 0.5)',
trafficShadowLineBg: '#7bff24',
trafficShadowLineDarkBg: '#7bff24',
trafficShadowLineShadow: '#7bff24',
trafficGradFrom: '#7bff24',
trafficGradTo: '#7bff24',
electricityAxisColor: '#7bff24',
electricityLineGradFrom: '#7bff24',
electricityLineGradTo: '#7bff24',
electricityLineShadow: '#7bff24',
electricityAreaGradFrom: '#7bff24',
electricityAreaGradTo: '#7bff24',
bubbleMapTitleColor: '#333333',
bubbleMapGeoColor1: '#e6b045',
bubbleMapGeoColor2: '#0088ff',
bubbleMapGeoColor3: '#ff386a',
bubbleMapGeoColor4: '#00d977',
bubbleMapGeoColor5: '#7659ff',
bubbleMapGeoColor6: '#24dec8',
bubbleMapAreaColor: '#2f3234',
bubbleMapAreaHoverColor: '#a1a1e5',
bubbleMapAreaBorderColor: '#dddddd',
},
};

131
src/app/@theme/theme.module.ts
View file

@ -22,22 +22,17 @@ import {
ThemeSettingsComponent,
TinyMCEComponent,
} from './components';
import { CapitalizePipe, PluralPipe, RoundPipe } from './pipes';
import {
OneColumnLayoutComponent,
SampleLayoutComponent,
ThreeColumnsLayoutComponent,
TwoColumnsLayoutComponent,
} from './layouts';
import { DEFAULT_THEME } from './styles/theme.default';
import { COSMIC_THEME } from './styles/theme.cosmic';
const BASE_MODULES = [
CommonModule,
FormsModule,
ReactiveFormsModule,
];
const BASE_MODULES = [CommonModule, FormsModule, ReactiveFormsModule];
const NGA_MODULES = [
NgaCardModule,
@ -55,106 +50,22 @@ const COMPONENTS = [
HeaderComponent,
FooterComponent,
SearchInputComponent,
TinyMCEComponent,
ThemeSettingsComponent,
TinyMCEComponent,
OneColumnLayoutComponent,
TwoColumnsLayoutComponent,
ThreeColumnsLayoutComponent,
SampleLayoutComponent,
ThreeColumnsLayoutComponent,
TwoColumnsLayoutComponent,
];
const PIPES = [
CapitalizePipe,
PluralPipe,
RoundPipe,
];
const PIPES = [CapitalizePipe, PluralPipe, RoundPipe];
const NGA_THEME_PROVIDERS = [
...NgaThemeModule.forRoot({
...NgaThemeModule.forRoot(
{
name: 'cosmic',
},
[
{
name: 'default',
base: 'default',
variables: {
tempColorGreen: '#7bff24',
tempColorLightBlue: '#7bff24',
tempColorBlue: '#7bff24',
tempColorYellow: '#7bff24',
tempColorOrange: '#7bff24',
solarColorDarkGreen: '#7bff24',
solarColorShadow: 'rgba(0, 217, 119, 0.3)',
trafficColorBlack: '#7bff24',
trafficTooltipBg: 'rgba(0, 255, 170, 0.35)',
trafficLineBg: 'rgba(146, 141, 255, 0.5)',
trafficShadowLineBg: '#7bff24',
trafficShadowLineDarkBg: '#7bff24',
trafficShadowLineShadow: '#7bff24',
trafficGradFrom: '#7bff24',
trafficGradTo: '#7bff24',
electricityAxisColor: '#7bff24',
electricityLineGradFrom: '#7bff24',
electricityLineGradTo: '#7bff24',
electricityLineShadow: '#7bff24',
electricityAreaGradFrom: '#7bff24',
electricityAreaGradTo: '#7bff24',
bubbleMapTitleColor: '#333333',
bubbleMapGeoColor1: '#e6b045',
bubbleMapGeoColor2: '#0088ff',
bubbleMapGeoColor3: '#ff386a',
bubbleMapGeoColor4: '#00d977',
bubbleMapGeoColor5: '#7659ff',
bubbleMapGeoColor6: '#24dec8',
bubbleMapAreaColor: '#2f3234',
bubbleMapAreaHoverColor: '#a1a1e5',
bubbleMapAreaBorderColor: '#dddddd',
},
},
{
name: 'cosmic',
base: 'default',
variables: {
tempColorGreen: '#7bff24',
tempColorLightBlue: '#31ffad',
tempColorBlue: '#2ec7fe',
tempColorYellow: '#fff024',
tempColorOrange: '#f7bd59',
solarColorDarkGreen: '#19977E',
solarColorShadow: 'rgba(0, 217, 119, 0.3)',
trafficColorBlack: '#000000',
trafficTooltipBg: 'rgba(0, 255, 170, 0.35)',
trafficLineBg: 'rgba(146, 141, 255, 0.5)',
trafficShadowLineBg: '#bdbaff',
trafficShadowLineDarkBg: '#a695ff',
trafficShadowLineShadow: 'rgba(33, 7, 77, 0.5)',
trafficGradFrom: 'rgba(118, 89, 255, 0.4)',
trafficGradTo: 'rgba(164, 84, 255, 0.5)',
electricityAxisColor: '#a1a1e5',
electricityLineGradFrom: '#00ffaa',
electricityLineGradTo: '#fff835',
electricityLineShadow: 'rgba(14, 16, 48, 0.4)',
electricityAreaGradFrom: 'rgba(188, 92, 255, 0.5)',
electricityAreaGradTo: 'rgba(188, 92, 255, 0)',
bubbleMapTitleColor: '#ffffff',
bubbleMapGeoColor1: '#e6b045',
bubbleMapGeoColor2: '#0088ff',
bubbleMapGeoColor3: '#ff386a',
bubbleMapGeoColor4: '#00d977',
bubbleMapGeoColor5: '#7659ff',
bubbleMapGeoColor6: '#24dec8',
bubbleMapAreaColor: '#2c2961',
bubbleMapAreaHoverColor: '#a1a1e5',
bubbleMapAreaBorderColor: '#654ddb',
},
},
],
[DEFAULT_THEME, COSMIC_THEME],
).providers,
...NgaSidebarModule.forRoot().providers,
...NgaSidebarModule.forRoot().providers,
@ -162,29 +73,15 @@ const NGA_THEME_PROVIDERS = [
];
@NgModule({
imports: [
...BASE_MODULES,
...NGA_MODULES,
],
exports: [
...BASE_MODULES,
...NGA_MODULES,
...COMPONENTS,
...PIPES,
],
declarations: [
...COMPONENTS,
...PIPES,
],
imports: [...BASE_MODULES, ...NGA_MODULES],
exports: [...BASE_MODULES, ...NGA_MODULES, ...COMPONENTS, ...PIPES],
declarations: [...COMPONENTS, ...PIPES],
})
export class ThemeModule {
static forRoot(): ModuleWithProviders {
return <ModuleWithProviders>{
ngModule: ThemeModule,
providers: [
...NGA_THEME_PROVIDERS,
],
providers: [...NGA_THEME_PROVIDERS],
};
}
}