Charts - Palette Extension Modes

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>DevExtreme Demo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/devextreme@18.1.1-pre-18052/dist/css/dx.common.css" />
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/devextreme@18.1.1-pre-18052/dist/css/dx.light.css" />

    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js@0.6.25/dist/zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>

    <script src="config.js"></script>
    <script>
        System.import('app')
            .then(function(viz) {
                System.import("devextreme/viz/themes").then(function(viz) {
                    viz.currentTheme("generic.light");
                    viz.refreshTheme();
                });
            })
            .catch(console.error.bind(console));
    </script>

</head>

<body class="dx-viewport">
    <div class="demo-container">
        <demo-app>Loading...</demo-app>
    </div>
</body>

</html>

// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular and DevExtreme here:
// https://github.com/DevExpress/devextreme-angular/blob/master/README.md

System.config({
    transpiler: 'ts',
    typescriptOptions: {
        module: "commonjs",
        emitDecoratorMetadata: true,
        experimentalDecorators: true
    },
    meta: {
        'typescript': {
            "exports": "ts"
        }
    },
    paths: {
        'npm:': 'https://unpkg.com/'
    },
    map: {
        'ts': 'npm:plugin-typescript@7.0.6/lib/plugin.js',
        'typescript': 'npm:typescript@2.2.2/lib/typescript.js',

        '@angular/core': 'npm:@angular/core@5.1.2/bundles/core.umd.js',
        '@angular/common': 'npm:@angular/common@5.1.2/bundles/common.umd.js',
        '@angular/compiler': 'npm:@angular/compiler@5.1.2/bundles/compiler.umd.js',
        '@angular/platform-browser': 'npm:@angular/platform-browser@5.1.2/bundles/platform-browser.umd.js',
        '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@5.1.2/bundles/platform-browser-dynamic.umd.js',
        '@angular/http': 'npm:@angular/http@5.1.2/bundles/http.umd.js',
        '@angular/router': 'npm:@angular/router@5.1.2/bundles/router.umd.js',
        '@angular/forms': 'npm:@angular/forms@5.1.2/bundles/forms.umd.js',

        'rxjs': 'npm:rxjs@5.3.1',

        'devextreme': 'npm:devextreme@18.1.1-pre-18052',
        'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js',
        'devextreme-angular': 'npm:devextreme-angular@18.1.1-beta.1'
    },
    packages: {
        'app': {
            main: './app.component.ts',
            defaultExtension: 'ts'
        },
        'devextreme': {
            defaultExtension: 'js'
        },
        'devextreme-angular': {
            main: 'index.js',
            defaultExtension: 'js'
        }
    }
});

<div class="flex-container">
    <dx-pie-chart id="pie" [palette]="palette" [dataSource]="data" [paletteExtensionMode]="paletteExtensionMode.toLowerCase()">
        <dxo-size [width]="500"></dxo-size>
        <dxo-legend [visible]="false"></dxo-legend>
        <dxi-series></dxi-series>
    </dx-pie-chart>

    <div class="palette-container flex-block">
        <div class="palette-item" *ngFor="let color of baseColors" [style.background-color]="color"></div>
    </div>
</div>

<div class="options">
    <div class="caption">Options</div>
    <div class="option">
        <span>Palette</span>
        <dx-select-box [items]="paletteCollection" [(value)]="palette">
        </dx-select-box>
    </div>
    <div class="option">
        <span>Palette Extension Mode</span>
        <dx-select-box [items]="paletteExtensionModes" [(value)]="paletteExtensionMode">
        </dx-select-box>
    </div>
</div>

import { NgModule, Component, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DxPieChartModule, DxSelectBoxModule } from 'devextreme-angular';
import { DataItem, Service } from './app.service';
import { getPalette } from "devextreme/viz/palette";

if(!/localhost/.test(document.location.host)) {
    enableProdMode();
}

@Component({
    selector: 'demo-app',
    templateUrl: 'app/app.component.html',
    styleUrls: ['app/app.component.css'],
    providers: [Service]
})

export class AppComponent {
    data: DataItem[]
    paletteCollection: String[]
    paletteExtensionModes: String[]
    paletteExtensionMode: String
    palette: String

    constructor(service: Service) {
        this.data = service.getData();
        this.paletteExtensionModes = service.getPaletteExtensionModes();
        this.paletteCollection = service.getPaletteCollection();
        this.palette = this.paletteCollection[0];
        this.paletteExtensionMode = "Blend";
    }

    get baseColors() { 
        return getPalette(this.palette).simpleSet;
    }
}

@NgModule({
    imports: [
        BrowserModule,
        DxPieChartModule,
        DxSelectBoxModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

import {
    Injectable
} from '@angular/core';

export class DataItem {
    arg: string;
    val: number;
}

@Injectable()
export class Service {
    getData(): DataItem[] {
        return new Array(20).fill(1).map((val, index) => {
            return {
                arg: "Item" + index,
                val: val
            }
        });
    }

    getPaletteCollection(): String[] {
        return ["Default", "Soft Pastel", "Harmony Light", "Pastel", "Bright", "Soft", "Ocean", "Vintage", "Violet", "Carmine", "Dark Moon", "Soft Blue", "Dark Violet", "Green Mist"];
    }

    getPaletteExtensionModes(): String[] {
        return ["Alternate", "Blend", "Extrapolate"];
    }
}

.flex-container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

#pie {
    height: 350px;
    width: 500px;
    margin: 20px;
}

.palette-container{
    float: left;
}

.palette-item{
    width: 40px;
    height: 40px;
}

.options {
    padding: 20px;
    background-color: rgba(191, 191, 191, 0.15);
    margin-top: 20px;
}

.caption {
    font-size: 18px;
    font-weight: 500;
}

.option {
    display: inline-block;
    margin-right: 70px;
    margin-top: 5px;
}

.option > span {
   margin: 0 10px 0 0;
}

.option > .dx-widget {
    display: inline-block;
    vertical-align: middle;
}