Apply our brand colors on source{d} dashboards #259

dpordomingo · 2019-08-15T07:48:29Z

supersedes #241 (This PR is the second stage, as defined by #241 (comment))
~~depends on #257~~
blocks #258

DISCLAIMER: This PR introduces visual changes (in charts color scheme) that should be validated or modified by @src-d/product. (screenshots below 👇)

This commit adds four new palettes for categorical schemes and two new ones for sequential schemes.

This commit also stablishes srcdMain and lime_white_royal as the defaults palettes when using SUPERSET_DEFAULT in categorical and sequential schemes.

dpordomingo · 2019-08-15T07:54:18Z

You can find below screenshots showing how this proposal looks like compared with our current color schemes.

overview dashboard

collaboration dashboard

note: Pull Requests Workflow chart could not be customized because its underlying type (Event Flow) does not allow to change its visual properties.

ricardobaeta

Thanks @dpordomingo ! Once product validation process starts I'll update here, and most probably contribute to this PR.

ricardobaeta · 2019-08-20T13:29:20Z

@dpordomingo Already started building a rationale on the branding design doc "Charts Colour Scheme".

ricardobaeta · 2019-09-10T13:01:59Z

@src-d/applications

My last commit e65a75f improves the Charts Colour scheme. This is the result of a collaboration with Anita Lillie from Superset's design community, and the full rationale can be seen on the source{d}-branded Superset UI Design Doc on the Charts Colours Section.

Needless to say that @dpordomingo did all the hard work, and improving it couldn't have been more streamlined by him 🙏

When this is merged, we close source{d}-branded superset UI from 2019-R7-CE.

carlosms

The linter is complaining about a few style issues (quotes and comma), and one typo in a name.
https://travis-ci.com/src-d/sourced-ui/jobs/232700406

srcd/superset/assets/src/customization/colors.js

carlosms

Adding comments that should have been included in the previous review...

srcd/superset/assets/src/customization/colors.js

ricardobaeta · 2019-09-10T14:57:45Z

@carlosms Thanks for the review, all changes were addressed on my last commit 4e4f683.

srcd/superset/assets/src/customization/colors.js

carlosms

👏

dpordomingo · 2019-09-11T09:34:54Z

LGTM @ricardobaeta

How should we proceed to merge & release?
Do we have any plan from @src-d/product ?

ricardobaeta · 2019-09-11T11:00:41Z

@dpordomingo The plan was established by @src-d/product for the 2019-R7-CE. We addressed the changes and fully documented our decisions on the source{d} Branding Design Doc.

I would say we can go for the merge and release.

dpordomingo · 2019-09-12T15:44:07Z

Ok. I'll rebase over current master, perform a quick sanity check, and merge if everything is ok.

This commit add four new palettes for categorical schemes and two new ones for sequential schemes. This commit also stablish 'srcdMain' and 'lime_white_royal' as the defaults for 'SUPERSET_DEFAULT' categorical and sequential schemes. Signed-off-by: David Pordomingo <David.Pordomingo.F@gmail.com>

Signed-off-by: Ricardo Baeta <ricardo@ricardobaeta.com>

from https://docs.google.com/document/d/1cD7SvX1MDrUxBsxjb7AYAxQUSCdhxGWrktrQKlPVPyw/edit#bookmark=id.3n1cgzc2rbmf Signed-off-by: David Pordomingo <David.Pordomingo.F@gmail.com>

Signed-off-by: David Pordomingo <David.Pordomingo.F@gmail.com>

Sky colors are not in the Design Doc from https://docs.google.com/document/d/1cD7SvX1MDrUxBsxjb7AYAxQUSCdhxGWrktrQKlPVPyw/edit#bookmark=id.3n1cgzc2rbmf Signed-off-by: David Pordomingo <David.Pordomingo.F@gmail.com>

dpordomingo · 2019-09-13T08:39:49Z

I rebased and performing the sanity check, I realized that the colors are not ordered as in the design doc, and also that sky color is not in that document, so I pushed some commits to implement the palette defined in the docs.

@ricardobaeta should I merge with my proposal? or is the color gradient (on the palettes you pushed) different than the one in the design document on purpose?

Before my commits:

It was pushed this palette, which has a different color gradient compared with the design doc.

It would create this color distribution, for example:

With my commits:

The palette I just pushed implements the gradient as in the design doc, and removes the sky color because it does not exist in that docs:

it would produce this other distribution, imho more balanced.

click to see the code used to draw the palettes above

const PR_palette = {
    royal: '#7015a8',
    royalMiddle: '#8719cb',
    royalDeep: '#591085',
    royalLight: '#a438e7',
    royalLightDeep: '#bc6ded',

    lime: '#008168',
    limeMiddle: '#009b7c',
    blueDeep: '#006853',
    limeLight: '#00b491',
    blueLightDeep: '#00c8a1',

    coral: '#e5770a',
    coralMiddle: '#f68b0c',
    coralDeep: '#d66600',
    coralLight: '#f89c30',
    coralLightDeep: '#f9ae56',

    vanila: '#d024c6',
    vanilaLight: '#e981e3',

    navy: '#195dca',
    navyLight: '#8fb5f1',

    sky: '#29bff2',
    skyLight: '#c9effc',

    gray: '#6d6e71',
    grayLight: '#c6c7c8',
};

const PR_scheme = palette => [
    {
        id: 'srcdMain',
        label: 'source{d} main colors',
        colors: [
            palette.royal,
            palette.royalDeep,
            palette.royalLight,
            palette.royalLightDeep,
            palette.lime,
            palette.blueDeep,
            palette.limeLight,
            palette.blueLightDeep,
            palette.coral,
            palette.coralDeep,
            palette.coralLight,
            palette.coralLightDeep,
        ],
    },
    {
        id: 'srcdAll',
        label: 'source{d} all colors + middle gradient',
        colors: [
            palette.royal,
            palette.royalMiddle,
            palette.royalDeep,
            palette.royalLight,
            palette.royalLightDeep,
            palette.lime,
            palette.limeMiddle,
            palette.blueDeep,
            palette.limeLight,
            palette.blueLightDeep,
            palette.coral,
            palette.coralMiddle,
            palette.coralDeep,
            palette.coralLight,
            palette.coralLightDeep,
            palette.vanila,
            palette.vanilaLight,
            palette.navy,
            palette.navyLight,
            palette.sky,
            palette.skyLight,
            palette.gray,
            palette.grayLight,
        ],
    },
    {
        id: 'srcdSix',
        label: 'source{d} six colors',
        colors: [
            palette.royal,
            palette.lime,
            palette.coral,
            palette.vanila,
            palette.navy,
            palette.sky,
        ],
    },
    {
        id: 'srcdDuo',
        label: 'source{d} two colors',
        colors: [
            palette.royal,
            palette.royalDeep,
        ],
    },
];

const ALT_palette = {
    royalDeep: '#591085',
    royalMiddle: '#7015a8',
    royal: '#8719cb',
    royalLightDeep: '#a438e7',
    royalLight: '#bc6ded',

    coralDeep: '#d66600',
    coralMiddle: '#e5770a',
    coral: '#f68b0c',
    coralLightDeep: '#f89c30',
    coralLight: '#f9ae56',

    limeDeep: '#006853',
    limeMiddle: '#008168',
    lime: '#009b7c',
    limeLightDeep: '#00b491',
    limeLight: '#00c8a1',

    vanila: '#d024c6',
    vanilaLight: '#e981e3',

    navy: '#195dca',
    navyLight: '#8fb5f1',

    gray: '#6d6e71',
    grayLight: '#c6c7c8',
}

const ALT_scheme = palette => [
    {
        id: 'srcdMain',
        label: 'source{d} main colors',
        colors: [
            palette.royalDeep,
            palette.royal,
            palette.royalLightDeep,
            palette.royalLight,
            palette.coralDeep,
            palette.coral,
            palette.coralLightDeep,
            palette.coralLight,
            palette.limeDeep,
            palette.lime,
            palette.limeLightDeep,
            palette.limeLight,
        ],
    },
    {
        id: 'srcdAll',
        label: 'source{d} all colors + middle gradient',
        colors: [
            palette.royalDeep,
            palette.royalMiddle,
            palette.royal,
            palette.royalLightDeep,
            palette.royalLight,
            palette.coralDeep,
            palette.coralMiddle,
            palette.coral,
            palette.coralLightDeep,
            palette.coralLight,
            palette.limeDeep,
            palette.limeMiddle,
            palette.lime,
            palette.limeLightDeep,
            palette.limeLight,
            palette.vanila,
            palette.vanilaLight,
            palette.navy,
            palette.navyLight,
            palette.gray,
            palette.grayLight,
        ],
    },
    {
        id: 'srcdSix',
        label: 'source{d} six colors',
        colors: [
            palette.royalDeep,
            palette.coralMiddle,
            palette.lime,
            palette.vanila,
            palette.navy,
            palette.gray,
        ],
    },
    {
        id: 'srcdDuo',
        label: 'source{d} two colors',
        colors: [
            palette.royalMiddle,
            palette.royalLight,
        ],
    },
];

const prepare = () => {
    style = document.createElement('style');
    style.innerHTML = `
        body {
            margin: 20px;
        }
        h1 {
            margin-top: 20px;
        }
        .label,
        .color {
            display: inline-block;
            margin: 2px 1px;
            padding: 20px 6px;
        }
        .label {
            width: 75px;
            text-align: right;
            color: #666;
        }
        .color {
            font-family: courier;
            color: #fff;
            font-size: 11px;
            margin-left: 0px;
        }`;
    document.body.innerHTML = '';
    document.body.appendChild(style);
}

const print = scheme => scheme.forEach(p => {
    const palette = document.createElement('div');
    const label = document.createElement('span');
    label.className = 'label';
    label.innerHTML = p.id;
    palette.appendChild(label);
    p.colors.forEach(c => {
        const color = document.createElement('span');
        color.className = 'color';
        color.style.background = c;
        color.innerHTML = c;
        palette.appendChild(color);
    });
    document.body.appendChild(palette);
});

const header = text => {
    const title = document.createElement('h1')
    title.innerHTML = text;
    document.body.appendChild(title);
};

prepare();
header('PR palette')
print(PR_scheme(PR_palette));
header('alternative palette')
print(ALT_scheme(ALT_palette));

ricardobaeta

This is stunning David ✨

dpordomingo added the enhancement New feature or request label Aug 15, 2019

dpordomingo requested review from a team August 15, 2019 07:48

dpordomingo self-assigned this Aug 15, 2019

This was referenced Aug 15, 2019

Use reduced palettes #258

Merged

Use SUPERSET_DEFAULT as the default palette #257

Merged

[RFC] Apply our brand colors on source{d} charts #241

Closed

se7entyse7en approved these changes Aug 15, 2019

View reviewed changes

ricardobaeta reviewed Aug 15, 2019

View reviewed changes

dpordomingo force-pushed the schemes-branding branch 5 times, most recently from 080d69b to aa05be4 Compare August 19, 2019 04:12

ricardobaeta force-pushed the schemes-branding branch from ad729b3 to e65a75f Compare September 10, 2019 12:54

carlosms reviewed Sep 10, 2019

View reviewed changes

srcd/superset/assets/src/customization/colors.js Outdated Show resolved Hide resolved

carlosms reviewed Sep 10, 2019

View reviewed changes

srcd/superset/assets/src/customization/colors.js Outdated Show resolved Hide resolved

srcd/superset/assets/src/customization/colors.js Outdated Show resolved Hide resolved

ricardobaeta force-pushed the schemes-branding branch from e42954c to 4e4f683 Compare September 10, 2019 15:10

carlosms reviewed Sep 10, 2019

View reviewed changes

srcd/superset/assets/src/customization/colors.js Outdated Show resolved Hide resolved

ricardobaeta force-pushed the schemes-branding branch from b0ec8ae to 157da4e Compare September 10, 2019 16:43

carlosms approved these changes Sep 10, 2019

View reviewed changes

dpordomingo changed the title ~~[RFC] Apply our brand colors on source{d} dashboards~~ Apply our brand colors on source{d} dashboards Sep 11, 2019

dpordomingo mentioned this pull request Sep 11, 2019

source{d} color scheme by default on Charts Visual Properties #255

Closed

dpordomingo and others added 6 commits September 12, 2019 21:23

Improve Charts Colour

1cfe186

Signed-off-by: Ricardo Baeta <ricardo@ricardobaeta.com>

Sort colors to follow gradients from Design Doc

354963c

from https://docs.google.com/document/d/1cD7SvX1MDrUxBsxjb7AYAxQUSCdhxGWrktrQKlPVPyw/edit#bookmark=id.3n1cgzc2rbmf Signed-off-by: David Pordomingo <David.Pordomingo.F@gmail.com>

Move coral before lime as in the Design Doc

3d2b9cb

from https://docs.google.com/document/d/1cD7SvX1MDrUxBsxjb7AYAxQUSCdhxGWrktrQKlPVPyw/edit#bookmark=id.3n1cgzc2rbmf Signed-off-by: David Pordomingo <David.Pordomingo.F@gmail.com>

Rename colors

0fbe429

Signed-off-by: David Pordomingo <David.Pordomingo.F@gmail.com>

Remove sky color

73e15ce

Sky colors are not in the Design Doc from https://docs.google.com/document/d/1cD7SvX1MDrUxBsxjb7AYAxQUSCdhxGWrktrQKlPVPyw/edit#bookmark=id.3n1cgzc2rbmf Signed-off-by: David Pordomingo <David.Pordomingo.F@gmail.com>

dpordomingo force-pushed the schemes-branding branch from 157da4e to 73e15ce Compare September 13, 2019 08:39

ricardobaeta approved these changes Sep 13, 2019

View reviewed changes

dpordomingo merged commit 8a07c7d into src-d:master Sep 13, 2019

dpordomingo deleted the schemes-branding branch September 13, 2019 08:46

This was referenced Oct 17, 2019

Add interlaced palettes #305

Open

Show only source{d} palettes #309

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Apply our brand colors on source{d} dashboards #259

Apply our brand colors on source{d} dashboards #259

Uh oh!

dpordomingo commented Aug 15, 2019 •

edited

Loading

Uh oh!

dpordomingo commented Aug 15, 2019

Uh oh!

ricardobaeta left a comment

Uh oh!

ricardobaeta commented Aug 20, 2019

Uh oh!

ricardobaeta commented Sep 10, 2019

Uh oh!

carlosms left a comment

Uh oh!

Uh oh!

carlosms left a comment

Uh oh!

Uh oh!

Uh oh!

ricardobaeta commented Sep 10, 2019 •

edited

Loading

Uh oh!

Uh oh!

carlosms left a comment

Uh oh!

dpordomingo commented Sep 11, 2019 •

edited

Loading

Uh oh!

ricardobaeta commented Sep 11, 2019

Uh oh!

dpordomingo commented Sep 12, 2019

Uh oh!

dpordomingo commented Sep 13, 2019

Uh oh!

ricardobaeta left a comment

Uh oh!

Uh oh!

Apply our brand colors on source{d} dashboards #259

Apply our brand colors on source{d} dashboards #259

Uh oh!

Conversation

dpordomingo commented Aug 15, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dpordomingo commented Aug 15, 2019

overview dashboard

collaboration dashboard

Uh oh!

ricardobaeta left a comment

Choose a reason for hiding this comment

Uh oh!

ricardobaeta commented Aug 20, 2019

Uh oh!

ricardobaeta commented Sep 10, 2019

Uh oh!

carlosms left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

carlosms left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

ricardobaeta commented Sep 10, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

carlosms left a comment

Choose a reason for hiding this comment

Uh oh!

dpordomingo commented Sep 11, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ricardobaeta commented Sep 11, 2019

Uh oh!

dpordomingo commented Sep 12, 2019

Uh oh!

dpordomingo commented Sep 13, 2019

Before my commits:

With my commits:

Uh oh!

ricardobaeta left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

dpordomingo commented Aug 15, 2019 •

edited

Loading

ricardobaeta commented Sep 10, 2019 •

edited

Loading

dpordomingo commented Sep 11, 2019 •

edited

Loading