devexpress-dashboard 19.1.13 → 19.2.3

package/scss/viewer-parts/styles/generic/dashboard.generic.scss

@@ -0,0 +1 @@
+@import '../../../styles/_imports.scss';
    background-repeat: no-repeat;
    background-position: center center;
    width: 24px;
    height: 24px;
    user-select: none;
    @include dx-dashboard-small-icon;
    display: inline-block;
    padding: 0px;
    border: 1px solid transparent;
    opacity: $opacity;
    background-image: $image;
    text-align: left;
    border: 1px solid $dashboard-border-color;
    .dx-dashboard-title-tooltip-list {
        .dx-dashboard-title-tooltip-list-text {
            color: $dashboard-title-master-filter-state-header-color;
        }
    }
    background-color: $dashboard-info-toast-bg;
    h1 {
        color: $dashboard-info-toast-color; 
    }
    .dx-overlay-shader {
        background-color: $dashboard-overlay-shader-bg;
        transition: background-color 0.15s ease;
        transition-delay: 0.15s;
    }
        margin-right: $GENERIC_DIALOG_LABEL_RIGHT_OFFSET;
    .dx-dashboard-dialog-element-name-margin-top {
            margin-top: $GENERIC_DIALOG_LARGE_MARGIN_TOP;
     }
    .dx-dashboard-dialog-element-text-box {
        width: $GENERIC_DIALOG_TEXT_BOX_WIDTH;
    }
    .dx-dashboard-dialog-element-margin-top {
        margin-top: $GENERIC_DIALOG_LARGE_MARGIN_TOP;
    }
    .dx-dashboard-dialog-element-number-box {
        width: $GENERIC_DIALOG_NUMBER_BOX_WIDTH;
    }
    .dx-popup-content {
        padding: 0;
        border-bottom: 1px solid $dashboard-border-color;
    }
    .dx-row>td:first-child {
        padding-left: $GENERIC_DIALOG_PADDING;
    }
    padding: $GENERIC_DIALOG_PADDING;
    min-width: $GENERIC_DIALOG_BUTTONS_MIN_WIDTH;
    position: absolute;
    left: -10000px;
    font-size: $GENERIC_DIALOG_ELEMENTS_FONT_SIZE;
    padding: $GENERIC_TEXTBOX_PADDING;
    color: $dashboard-color;
    color: $dashboard-color;
    white-space: nowrap;
    &:before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        height: 100%;
        width: 0px;
    }
    &>* {
        display: inline-block;
        vertical-align: middle;
        white-space: normal;
    }
    width: 100%;
    height: 100%;
    text-align: center;
    @include dx-dashboard-vertical-centering;
    color: $dashboard-toolbar-color;
    font-family: $FONT_FAMILY;
    font-size: 24px;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0px;
    padding: 0px;
    border: none;
    line-height: normal;
    background-color: transparent;
    fill: $dashboard-icon-accent-color;
    fill: $dashboard-type-icon-color;
    fill: $dashboard-icon-color;
    fill: $dashboard-icon-success-color;
    fill: $dashboard-icon-danger-color;
    fill: $dashboard-icon-warning-color;
    fill: $dashboard-icon-accent-color;
    fill: $dashboard-type-icon-color;
    fill: $dashboard-icon-color;
    fill: $dashboard-icon-success-color;
    fill: $dashboard-icon-danger-color;
    fill: $dashboard-icon-warning-color;
    fill: $dashboard-icon-ligth-color;
    .dx-dashboard-red-icon {
        fill: currentColor;
    }
    .dx-dashboard-yellow-icon {
        fill: currentColor;
    }
    .dx-dashboard-icon {
        fill: currentColor;
    }
    -webkit-box-shadow: $value;
    -moz-box-shadow: $value;
    box-shadow: $value;
    .dx-dashboard-caption-toolbar .dx-toolbar-items-container {
        color: $dashboard-accent;
        .dx-toolbar-label {
            color: $dashboard-designer-sub-header-color;
        }
    }
    .dx-overlay-content {
        @include box-shadow(0px 1px 4px $dashboard-shadow);
        border: 1px solid $dashboard-shadow-border-color;
        border-radius: 2px;
    }
    .dx-tile {
        svg use {
            color: $dashboard-icon-color;
        }
        &.dx-state-active {
            background-color: transparent;
        }
        &.dx-state-hover, &.dx-state-focused {
            background-color: $dashboard-data-item-hover-bg;
            svg use {
                color: $dashboard-hover-icon-color;
            }
        }
    }
    .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item {
        .dx-list-item-content {
            padding: 6px 10px;
        }
    }
    font-family: $FONT_FAMILY;
    background-color: $dashboard-widget-bg;
    .dx-toolbar-item, .dx-button {
        color: $dashboard-toolbar-color;
    }
    .dx-button {
        svg use {
            color: $dashboard-icon-color;
        }
        &.dx-dashboard-checked {
            svg use {
                color: $dashboard-checked-icon-color;
            }
        }
        &.dx-dashboard-data-reduced.dx-dashboard-checked:not(.dx-state-hover):not(.dx-state-focused) {
            svg use {
                color: $dashboard-icon-warning-color;
            }
        }
        &.dx-dashboard-filter:not(.dx-state-hover):not(.dx-state-focused) {
            svg use {
                color: $dashboard-icon-accent-color;
            }
        }
        &.dx-dashboard-restore-item:not(.dx-state-hover):not(.dx-state-focused) {
            svg use {
                color: $dashboard-icon-danger-color;
            }
        }
        &.dx-state-hover, &.dx-state-focused {
            svg use {
                color: $dashboard-hover-icon-color;
            }
        }
    }
    &.dx-dashboard-caption-toolbar-border {
        border-bottom: 1px solid $dashboard-border-color;
    }
    .dx-toolbar-after .dx-toolbar-label .dx-caption-panel-separator {
        border-left-color: $dashboard-border-color;
    }
    background-color: transparent;
    .filter-text {
        color: $dashboard-accent;
    }
    background-color: $dashboard-widget-bg;
    background-color: $dashboard-widget-bg;
    input {
        background-color: $dashboard-widget-bg;
    }
    &:not(.dx-texteditor-empty) {
        .dx-icon-search:before, .dx-placeholder {
            color: $dashboard-border-color;
        }
    }
    .dx-icon-search:before, .dx-placeholder {
        color: #B4B4B4;
    }
    border-bottom: 1px solid $dashboard-border-color;
    border: 1px solid $dashboard-border-color;
    border-bottom: none;
    .dx-treelist-select-all {
        padding-bottom: $GENERIC_TREELIST_ALL_PADDING_BOTTOM;
    }
    .dx-treelist-text-content {
        padding-left: $GENERIC_TREELIST_TEXT_PADDING_LEFT;
    }
    .dx-treelist-rowsview {
        .dx-treelist-collapsed span, .dx-treelist-expanded span {
            font-size: $GENERIC_TREELIST_NODE_BUTTON_SIZE;
        }
        .dx-selection.dx-row:not(.dx-row-lines):not(.dx-row-focused) > td, .dx-treelist-rowsview .dx-selection.dx-row:hover:not(.dx-row-lines):not(.dx-row-focused) > td {
            border: none;
        }
    }
    .dx-treelist-icon-container.dx-editor-inline-block .dx-checkbox {
        margin-top: $GENERIC_TREELIST_CHECKBOX_MARGIN;
    }
    .dx-dashboard-date-filter-widget {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        overflow: hidden;
        .dx-dashboard-date-filter-buttons {
            display: flex;
            flex-wrap: wrap;
            font-size: $GENERIC_DIALOG_ELEMENTS_FONT_SIZE;
            font-family: $FONT_FAMILY;
            height: 100%;
            &.dx-dashboard-date-filter-buttons-no-caption {
                margin: -$DATE_FILTER_BUTTON_MARGIN;
            }
            .dx-dashboard-date-filter-button {
                margin: $DATE_FILTER_BUTTON_MARGIN;
                .dx-button-mode-contained {
                    border-color: $dashboard-border-color;
                }
                .dx-button-has-text {
                    width: 100%;
                }
                .dx-button-text {
                    width: 100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .dx-item-selected {
                    background-color: $dashboard-item-selected-bg;
                }
            }
            .dx-dashboard-date-filter-datepicker-button-empty {
                .dx-button-text {
                    color: $dashboard-disabled-color;
                }
            }
        }
        .dx-dashboard-date-filter-buttons-left-to-right {
            flex-direction: row;
            align-items: baseline;
            align-content: flex-start;
            .dx-dashboard-date-filter-button {
                flex-grow: 1;
                flex-basis: 0;
            }
        }
        .dx-dashboard-date-filter-buttons-top-down {
            flex-direction: column;
        }
    }
    .dx-dashboard-date-filter-overlay-wrapper > .dx-overlay-content {
        box-shadow: 0px 1px 4px $dashboard-shadow;
    }
    .dx-dashboard-date-filter-overlay {
        border: 1px solid $dashboard-border-color;
        background-color: $dashboard-widget-bg;
        padding: $DATEFILTER_DATEPICKER_POPUP_PADDING;
        position: relative;
        display: table;
        .dx-dashboard-date-filter-overlay-calendar-container {
            display: table-cell;
        }
        .dx-dashboard-date-filter-overlay-calendar {
            background-color: $dashboard-widget-bg;
            margin: $DATEFILTER_DATEPICKER_POPUP_PADDING;
            .dx-calendar-cell.dx-calendar-today {
                font-weight: normal;
            }
        }
        .dx-dashboard-date-filter-overlay-text-box {
            margin: $DATEFILTER_DATEPICKER_POPUP_PADDING;
            .dx-texteditor-input {
                background-color: $dashboard-widget-bg;
            }
        }
        .dx-dashboard-date-filter-overlay-button {
            float: right;
            background-color: $dashboard-widget-bg;
            margin: $DATEFILTER_DATEPICKER_POPUP_PADDING;
        }
    }
    .dx-dashboard-date-filter-overlay.dx-dashboard-date-filter-mobile {
        display: flex;
        flex-direction: column;
        .dx-dashboard-date-filter-overlay-calendar-container {
            margin: 2px;
            display: block;
        }
    }
    @include dx-dashboard-grid;

package/scss/viewer-parts/styles/generic/widgetsViewer.generic.scss

@@ -0,0 +1 @@
+$WIDGETSVIEWER_CARD_FONT_FAMILY: Segoe UI, HelveticaNeue, Trebuchet MS, Verdana;
    visibility: hidden;
    position: fixed;
    top: 0px;
    left: 0px;
    overflow: visible;
    font-family: $WIDGETSVIEWER_CARD_FONT_FAMILY;
    font-weight: normal;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-sizing: border-box;
    float: left;
    text-align: right;
    @include dx-cardItem-hiddenContainers-options;
    @include dx-cardItem-hiddenContainers-options;
    white-space: nowrap;
    @include dx-cardItem-hiddenContainers-options;
    white-space: nowrap;
    fill: currentColor;
    color: $dashboard-delta-positive-icon-color;
    color: $dashboard-delta-negative-icon-color;
    color: $dashboard-delta-warning-icon-color;
    color: $dashboard-delta-neutral-icon-color;
    color: $dashboard-delta-default-icon-color;
    overflow: hidden;
    border: solid 1px;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    padding: 0px;
    font-family: $WIDGETSVIEWER_CARD_FONT_FAMILY;
    font-weight: normal;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    .dx-widgetItem {
        @include dx-viewerItem;
        background-color: transparent;
        border-color: transparent;
    }
    .dx-cardItem {
        @include dx-viewerItem;
        box-shadow: 0px 1px 4px $dashboard-shadow;
        border: 1px solid $dashboard-border-color;
        background-color: $dashboard-widget-bg;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        .dx-card-title {
            color: $dashboard-designer-header-color;
            line-height: 100%;
            @include dx-carditem-font-properties;
            @include dx-carditem-ellipsis;
        }
        .dx-card-subTitle {
            @include dx-carditem-font-properties;
            @include dx-carditem-ellipsis;
            color: $dashboard-disabled-color;
            width: 60%;
            line-height: 100%;
            white-space: normal;
            display: block;
            float: left;
            box-sizing: border-box;
        }
        @mixin dx-card-variableValue {
            @include dx-cardItem-value;
            width: 40%;
        }
        .dx-card-variableValue1 {
            @include dx-card-variableValue;
        }
        .dx-card-variableValue2 {
            @include dx-card-variableValue;
        }
        .dx-card-mainValue {
            @include dx-cardItem-value;
            width: 82.5%;
            right: 0px;
            position: absolute;
        }
        span {
            @include dx-carditem-font-properties;
        }
        .dx-card-indicator {
            position: absolute;
        }
        .dx-card-sparkline {
            position: absolute;
            bottom: 0px;
            margin-bottom: 6px;
        }
    }
    @mixin dx-widget-viewer-selected-item {
        background-color: $dashboard-item-selected-bg !important;
        border: $dashboard-border-sub-color solid 1px !important;
    }
    .dx-widgetItem.dx-selected-viewer-item {
        @include dx-widget-viewer-selected-item;
    }
    .dx-cardItem.dx-selected-viewer-item {
        @include dx-widget-viewer-selected-item;
    }
    .dx-flex-card-layout.dx-selected-viewer-item {
        @include dx-widget-viewer-selected-item;
    }
    @mixin dx-hovered-widget-viewer-item {
        background-color: $dashboard-item-hover-bg;
        border: $dashboard-border-sub-color solid 1px;
    }
    .dx-hovered-viewer-item {
        @include dx-hovered-widget-viewer-item;
    }
    .dx-flex-card-layout.dx-hovered-viewer-item {
        @include dx-hovered-widget-viewer-item;
        cursor: pointer;
    }
    .dx-flex-card-layout {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        border: 1px solid $dashboard-border-color;
        background-color: $dashboard-widget-bg;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        padding: 10px;
        margin: 3px;
        cursor: default;
        box-sizing: border-box;
        .dx-flex-card-layout-content {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-content: stretch;
            .dx-flex-card-layout-content-top-rows {
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
            }
            .dx-flex-card-layout-content-bottom-rows {
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
            }
            .dx-flex-card-layout-row {
                display: flex;
                align-items: baseline;
                justify-content: space-between;
            }
            .dx-flex-card-layout-row-center-only {
                display: flex;
                align-items: baseline;
                justify-content: center;
            }
            .dx-flex-card-layout-row-left-right {
                display: flex;
                align-items: baseline;
                overflow: hidden;
            }
            .dx-flex-card-layout-row-element {
                font-family: $WIDGETSVIEWER_CARD_FONT_FAMILY;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                padding: 0 2px;
            }
            .dx-flex-card-layout-sparkline-row-element {
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }
        }
    }
    .dx-flex-card-cell-ignore-left-margin .dx-flex-card-layout {
        margin-left: 0px;
    }
    .dx-flex-card-cell-ignore-right-margin .dx-flex-card-layout {
        margin-right: 0px;
    }
    .dx-flex-card-cell-ignore-top-margin .dx-flex-card-layout {
        margin-top: 0px;
    }
    .dx-flex-card-cell-ignore-bottom-margin .dx-flex-card-layout {
        margin-bottom: 0px;
    }
    .dx-dashboard-card-without-background {
        .dx-flex-card-layout {
            box-shadow: 0px 1px 4px $dashboard-shadow;
            border-radius: 2px;
            border: none;
        }
    }

package/utils/theme-builder.js

@@ -0,0 +1,190 @@
+/**
+* DevExpress Dashboard (theme-builder.js)
+* Version:  19.2.3
+* Build date: Oct 21, 2019
+* Copyright (c) 2012 - 2019 Developer Express Inc. ALL RIGHTS RESERVED
+* License: https://www.devexpress.com/Support/EULAs/universal.xml
+*/
+const path = require('path');
+const fs = require('fs');
+
+const colorSchemeFile = "__color-scheme";
+const sizeSchemeFile = "__size-scheme";
+const devextremeThemeVars = "__devextreme-theme-vars";
+const dashboardCustomVars = "__dashboard-custom-vars";
+
+const indexFile = 'styles/index.scss';
+var defaultThemes = {
+    "generic": {
+        colorSchemes: {
+            "light": { path: "styles/generic/color-schemes/light/generic.light.devextreme.scss" },
+            "dark": { path: "styles/generic/color-schemes/dark/generic.dark.devextreme.scss" },
+
+            "carmine": { path: "styles/generic/color-schemes/light/generic.carmine.devextreme.scss" },
+            "greenmist": { path: "styles/generic/color-schemes/light/generic.green.mist.devextreme.scss" },
+            "softblue": { path: "styles/generic/color-schemes/light/generic.soft.blue.devextreme.scss" },
+
+            "darkmoon": { path: "styles/generic/color-schemes/dark/generic.dark.moon.devextreme.scss" },
+            "darkviolet": { path: "styles/generic/color-schemes/dark/generic.dark.violet.devextreme.scss" }
+        },
+        sizeSchemes: {
+            "": { name: "", path: "styles/generic/size-schemes/default.scss" },
+            "compact": { name: "compact", path: "styles/generic/size-schemes/compact.scss" }
+        }
+    }
+};
+
+
+const readInput = options => new Promise(resolve => {
+    const fileName = options.inputFile;
+    if(!fileName) resolve(options);
+
+    fs.readFile(fileName, (error, data) => {
+        if(error) {
+            console.error(`Unable to read the ${fileName} file.`);
+        } else {
+            const extension = path.extname(fileName);
+            if(extension !== '.json') {
+                options.data = data;
+            } else {
+                const inputObject = JSON.parse(data);
+                Object.assign(options, inputObject);
+            }
+        }
+        resolve(options);
+    });
+});
+
+function ensureDirectoryExistence(filePath) {
+    var dirname = path.dirname(filePath);
+    if(fs.existsSync(dirname)) {
+        return true;
+    }
+    ensureDirectoryExistence(dirname);
+    fs.mkdirSync(dirname);
+}
+
+const readFile = fileName => new Promise((resolve, reject) => {
+    fs.readFile(require.resolve(fileName), 'utf8', (error, data) => {
+        error ? reject(error) : resolve(data);
+    });
+});
+const scssCompilerWrapper = (nodeSass) => {
+    render: (scss) => {
+        return new Promise((resolve, reject) => {
+            nodeSass.render({
+                data: scss
+            }, (error, result) => {
+                if(error) {
+                    reject(error);
+                } else {
+                    resolve(result.css.toString());
+                }
+            });
+        });
+    }
+};
+
+
+function buildDashboardTheme(baseTheme, dashboardBaseTheme, dashboardColorVariables, devextremeMetadata, resolvePath, nodeSass) {
+    var baseTheme = dashboardBaseTheme || baseTheme || "generic.light";
+    var themeComponents = baseTheme.split(".");
+    var themeType = themeComponents[0] || "";
+    var colorScheme = themeComponents[1] || "";
+    var sizeScheme = themeComponents[2] || "";
+
+    var colorSchemeScss = defaultThemes[themeType].colorSchemes[colorScheme];
+    var sizeSchemeScss = defaultThemes[themeType].sizeSchemes[sizeScheme];
+
+   
+    var devextremeVarsFile = Object.keys(devextremeMetadata)
+        .reduce((acc, key) => acc + `${key.replace('@', '$')}: ${devextremeMetadata[key]};\n`, '');
+    var customDashboardVarsFile = (dashboardColorVariables || [])
+        .reduce((acc, value) => {
+            return acc + `${value.key.replace('@', '$')}: ${value.value};\n`
+        }, "");
+
+
+    var dashboardThemeResult = nodeSass.renderSync({
+        file: resolvePath(indexFile),
+        importer: function(url, prev, done) {
+            if(url.indexOf(colorSchemeFile) !== -1) {
+                return { file: resolvePath(colorSchemeScss.path) };
+            } else if(url.indexOf(sizeSchemeFile) !== -1) {
+                return { file: resolvePath(sizeSchemeScss.path) };
+            } else if(url.indexOf(devextremeThemeVars) !== -1) {
+                return { contents: devextremeVarsFile };
+            } else if(url.indexOf(dashboardCustomVars) !== -1) {
+                return { contents: customDashboardVarsFile };
+            } else {
+                return { file: url };
+            }
+        }
+    });
+
+    return new Promise((resolve) => resolve(dashboardThemeResult));
+}
+
+function writeResult(CleanCSS, devextremeResult, analyticsResult, dashboardResult, getDashboardCssHeader, outputColorScheme, outDir, saveDevExtremeCss = false, saveAnalyticsCss = false, createMinFile = false) {
+    var outFileName = path.join(outDir, `dx-dashboard.${outputColorScheme}.css`);
+    ensureDirectoryExistence(outFileName);
+
+    if(saveDevExtremeCss) {
+        let getFileName = (isMin) => path.join(outDir, `dx.${outputColorScheme}${isMin ? '.min' : ''}.css`);
+
+        fs.writeFileSync(getFileName(false), devextremeResult.css); // TODO: ensure devextreme file name
+        if(createMinFile) {
+            let minFile = new CleanCSS().minify(devextremeResult.css);
+            fs.writeFileSync(getFileName(true), minFile.styles);
+        }
+    }
+    if(saveAnalyticsCss) {
+        let getFileName = (isMin) => path.join(outDir, `dx-analytics.${outputColorScheme}${isMin ? '.min' : ''}.css`);
+
+        fs.writeFileSync(getFileName(false), analyticsResult.css); // TODO: ensure devextreme file name
+        if(createMinFile) {
+            let minFile = new CleanCSS().minify(analyticsResult.css);
+            fs.writeFileSync(getFileName(true), minFile.styles);
+        }
+    }
+
+    fs.writeFileSync(outFileName, getDashboardCssHeader(outputColorScheme) + dashboardResult.css.toString());
+    if(createMinFile) {
+        let minFile = new CleanCSS().minify(dashboardResult.css);
+        let outMinFileName = path.join(outDir, `dx-dashboard.${outputColorScheme}.min.css`);
+        fs.writeFileSync(outMinFileName, minFile.styles);
+    }
+}
+
+
+async function buildTheme(options, devExtremeThemeBuilder, analyticsThemeBuilder, nodeSass, nodeLess, cleanCSS, getCssHeader = () => '') {
+    var resolvePath = (p) => path.resolve(path.join(__dirname, "../scss"), p)
+    
+    var processedOptions = await readInput(options);
+    var devextremeOptions = { ...processedOptions }; // devextremeOptions object will be changed on devextreme theme builder working
+    devextremeOptions.reader = readFile;
+    devextremeOptions.scssCompiler = scssCompilerWrapper(nodeSass);
+    devextremeOptions.lessCompiler = nodeLess;
+
+    var devextremeResult = await devExtremeThemeBuilder.buildTheme(devextremeOptions)
+
+    if(analyticsThemeBuilder) {
+        var analyticsResult = await analyticsThemeBuilder(nodeLess, options.baseTheme, options.analyticsItems);
+    }
+
+    var dashboardResult = await buildDashboardTheme(options.baseTheme, options.dashboardBaseTheme, options.dashboardItems, devextremeResult.compiledMetadata, resolvePath, nodeSass);
+
+    return await writeResult(
+        cleanCSS,
+        devextremeResult,
+        analyticsResult,
+        dashboardResult,
+        getCssHeader,
+        options.outputColorScheme,
+        options.outputDir,
+        options.createDevextremeCss,
+        options.createAnalyticsCss,
+        options.createMinifiedCss);
+}
+
+module.exports.buildTheme = buildTheme;