Chart Color Scheme

RE: Chart Color Scheme

Rafael Fernandes — Tue, 12 Nov 2024 14:04:57 GMT

just as an FYI, I have added this to our Developer Guide documentation:

https://support.sugarcrm.com/documentation/sugar_developer/sugar_developer_guide_14.1/architecture/extensions/dropdownsstyle/

There's more coming in the next releases, so when we finalize that I'll add more to it as it becomes available.

RE: Chart Color Scheme

Rafael Fernandes — Wed, 02 Oct 2024 12:27:03 GMT

Hi Chris Raffle ,

you are absolutely right, I'm trying to understand why that feature wasn't documented, but if it is supposed to be, I'll make sure to add that to our guides..

thanks for digging..

rafa

RE: Chart Color Scheme

Chris Raffle — Wed, 02 Oct 2024 10:32:18 GMT

I was looking into an issue where some chart colors were the same for multiple dropdown options in a list. I was thinking it may be a customization affecting the issue, but what I found looks to be some new functionality introduced as part of the upgrade to 14.1.

It looks like on that upgrade, a new directory was added to the Extension framework:

./custom/Extension/application/Ext/DropdownsStyle

What I found in that directory is a file for each dropdown list in the format of <dropdown list name>_style.php (e.g. call_status_dom_style.php) which has a color designation for each dropdown entry defined:

<?php
 // created: 2024-09-27 20:27:37

$app_dropdowns_style['call_status_dom_style']=array (
  'Scheduled' =>
  array (
    'backgroundColor' => '#517bf8',
  ),
  'Held' =>
  array (
    'backgroundColor' => '#00e0e0',
  ),
  'Canceled' =>
  array (
    'backgroundColor' => '#36b0ff',
  ),
);

I confirmed that adding / removing entries from a dropdown list modifies the respective file. While it isn't UI-accessible, it does at least provide a safer way to modify chart colors where you are grouping by dropdown lists.

Rafael Fernandes - are there plans to add information about this to the Extension framework documentation in the developer guide?

Chris

RE: Chart Color Scheme

Peter Fuhrmann — Tue, 06 Aug 2024 08:12:26 GMT

[quote userid="3731" url="~/explore/help-forums/enterprise-professional/f/enterprise-professional-questions/5097/chart-color-scheme/24779"]selection of different themes you could pick from and then have a custom option.[/quote]

I would wish to have this in the personal profile settings, as every user has different preferences.

RE: Chart Color Scheme

André Lopes — Fri, 26 Jul 2024 19:44:42 GMT

Hi Alex Nassi , I would love to contribute to this improvement since several customers here in Brazil ask exactly the same feature.

Let me know if you would like an extra hand in this challenge.

RE: Chart Color Scheme

Alex Nassi — Fri, 26 Jul 2024 19:25:14 GMT

I'm sorry, but this idea has been reopened since it was not fully implemented. We now have consistent chart coloring, but the chart colors are not yet configurable. Please continue to refer to Idea 46555 for the configuration options request.

RE: Chart Color Scheme

Alex Nassi — Thu, 18 Jul 2024 18:19:17 GMT

Good news! This Idea that Brenda Rossetto referenced has been implemented in the most recent Sugar release, Sugar Sell Q3 2024 . Please see the release notes for additional information: https://support.sugarcrm.com/documentation/sugar_versions/14.1/sell/sugar_14.1.0_release_notes/#Reports

RE: Chart Color Scheme

Andrew Yeates — Tue, 07 Sep 2021 07:31:49 GMT

Hi Leaya, i'm with you here - I work in Presales at Sugar and this comes up quite a bit. Be great if there was a selection of different themes you could pick from and then have a custom option.

In the meantime, here is an example custom.less file you can use to edit the colours. It needs to be put in the instance name/custom/themes directory of your instance. You will need to check/match up the elements to your instance but it might point you in the right direction.

@cstm_purple1 : #5955a5;
@cstm_purple2 : #42468c;
@cstm_purple3: #7b7da6;
@cstm_purple4: #606ba6;
@cstm_purple5: #a4a6bf;
@cstm_purple6: #e6e6f2;
@cstm_purple7: #f5f5f5;
@cstm_purple8: #9997c9;
@cstm_purple9: #8c88d8;
@cstm_purple10: #5955a5;
@cstm_purple11: #353262;
@cstm_purple11: #474483;
@cstm_purple12: #a5a1f1;
@cstm_purple13: #6955a5;
@cstm_purple14: #7955a5;
@cstm_white: #ffffff;
@cstm_grey1: #747474;
@cstm_grey2: #d9d4d0;

// @mint => @sc-fill00, @sc-stroke00
.sc-fill00, .sc-stroke00 {
  fill: @cstm_purple1;
  background-color: @cstm_purple1;
  color:  @cstm_purple1;
  stroke:  @cstm_purple1;
}
// @green => @sc-fill01, @sc-stroke01
.sc-fill01, .sc-stroke01 {
  fill: @cstm_purple4;
  background-color: @cstm_purple4;
  color:  @cstm_purple4;
  stroke:  @cstm_purple4;
}
// @army => @sc-fill02, @sc-stroke02
.sc-fill02, .sc-stroke02 {
  fill: @cstm_grey1;
  background-color: @cstm_grey1;
  color:  @cstm_grey1;
  stroke:  @cstm_grey1;
}
// @yellow => @sc-fill03, @sc-stroke03
.sc-fill03, .sc-stroke03 {
  fill: @cstm_purple5;
  background-color: @cstm_purple5;
  color:  @cstm_purple5;
  stroke:  @cstm_purple5;
}
// @orange => @sc-fill04, @sc-stroke04
.sc-fill04, .sc-stroke04 {
  fill: @cstm_purple8;
  background-color: @cstm_purple8;
  color:  @cstm_purple8;
  stroke:  @cstm_purple8;
}
// @red => @sc-fill05, @sc-stroke05
.sc-fill05, .sc-stroke05 {
  fill: @cstm_purple2;
  background-color: @cstm_purple2;
  color:  @cstm_purple2;
  stroke:  @cstm_purple2;
 }
// @pink => @sc-fill06, @sc-stroke06
.sc-fill06, .sc-stroke06 {
  fill: @cstm_purple9;
  background-color: @cstm_purple9;
  color:  @cstm_purple9;
  stroke:  @cstm_purple9;
}
// @purple => @sc-fill07, @sc-stroke07
.sc-fill07, .sc-stroke07 {
  fill: @cstm_grey2;
  background-color: @cstm_grey2;
  color:  @cstm_grey2;
  stroke:  @cstm_grey2;
}
// @night => @sc-fill08, @sc-stroke08
.sc-fill08, .sc-stroke08 {
  fill: @cstm_purple10;
  background-color: @cstm_purple10;
  color:  @cstm_purple10;
  stroke:  @cstm_purple10;
}
// @blue => @sc-fill09, @sc-stroke09
.sc-fill09, .sc-stroke09 {
  fill: @cstm_purple3;
  background-color: @cstm_purple3;
  color:  @cstm_purple3;
  stroke:  @cstm_purple3;
}
//@ocean => @sc-fill10, @sc-stroke10
.sc-fill10, .sc-stroke10 {
  fill: @cstm_purple11;
  background-color: @cstm_purple11;
  color:  @cstm_purple11;
  stroke:  @cstm_purple11;
}
//@pacific => @sc-fill11, @sc-stroke11
.sc-fill11, .sc-stroke11 {
  fill: @cstm_purple12;
  background-color: @cstm_purple12;
  color:  @cstm_purple12;
  stroke:  @cstm_purple12;
}
//@teal => @sc-fill12, @sc-stroke12
.sc-fill12, .sc-stroke12 {
  fill: @cstm_purple13;
  background-color: @cstm_purple13;
  color:  @cstm_purple13;
  stroke:  @cstm_purple13;
}
//@coral => @sc-fill13, @sc-stroke13
.sc-fill13, .sc-stroke13 {
  fill: @cstm_purple14;
  background-color: @cstm_purple14;
  color:  @cstm_purple14;
  stroke:  @cstm_purple14;
}

.module-list .megamenu>.dropdown .module-name {
  color: @cstm_grey1;
}

.module-list .megamenu>.dropdown.active .module-name {
  color: @cstm_purple1;
  font-weight: 500;
  text-decoration: none;
  font-family: "OpenSans", Helvetica, Arial, sans-serif;
  font-size: 14px;
  -webkit-transition: all 150ms ease-in-out;
  -o-transition: all 150ms ease-in-out;
  transition: all 150ms ease-in-out;
}

.navbar .megamenu>.dropdown:hover {
  background: @cstm_white;
  color: @cstm_purple1;
}

.navbar .megamenu>.dropdown.active .btn-group:not(.open):not(.home) {
  background-color: @cstm_white;
}

// Option 1
//.btn-primary {
//  color: #fff;
//  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
//  background-color: @cstm_purple2;
//  background-image: linear-gradient(to bottom, @cstm_purple1, @cstm_purple1);
//  background-repeat: repeat-x;
//  border-color: @cstm_purple1 @cstm_purple1 @cstm_purple2;
//  border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
//}
//
//.btn-primary:not(.disabled):not(.btn-invisible):hover {
//  box-shadow: none;
//  border: solid 1px @cstm_purple4;
//  background: @cstm_purple3;
//};

// Option 2

.btn-primary {
  color: @cstm_purple1;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
  background-color: @cstm_purple1;
  background-image: linear-gradient(to bottom, @cstm_white, @cstm_white);
  background-repeat: repeat-x;
  border-color: @cstm_purple1;
}

.btn-primary:not(.disabled):not(.btn-invisible):hover {
  box-shadow: none;
  border: solid 1px @cstm_purple2;
  background: @cstm_purple1;
}

.navbar .megamenu>.dropdown .dropdown-menu li a:focus, .navbar .megamenu>.dropdown .dropdown-menu li a:hover {
  color: #fff;
  background: @cstm_purple1;
}

a, a:hover{
  color: @cstm_purple1;
}

.headerpane .btn-toolbar .btn-group .btn:not(.btn-primary), .headerpane .btn-toolbar .btn-group .btn:not(.btn-primary).dropdown-toggle .fa {
  color:@cstm_purple1;
}

.dropdown-menu li>a:hover, .dropdown-menu li>a:focus, .dropdown-menu li>button:hover, .dropdown-menu li>button:focus, .dropdown-menu li>span>button:hover, .dropdown-menu li>span>button:focus, .dropdown-menu li>span>a:hover, .dropdown-menu li>span>a:focus, .dropdown-menu .active>a, .dropdown-menu .active>span>a, .dropdown-menu .active>a:hover, .dropdown-menu .active>a:focus, .dropdown-menu .active>span>a:hover, .dropdown-menu .active>span>a:focus {
  color: #fff;
  text-decoration: none;
  background: @cstm_purple1;
  filter: none;
}

.btn.btn-link {
  color: @cstm_purple1;
}

.btn-group .dropdown-toggle:active .btn.btn-primary.dropdown-toggle, .btn-group.open .btn.btn-primary.dropdown-toggle {
  background-color: @cstm_purple1;
}

.filter-view .choice-related, .filter-view .choice-filter {
  background: @cstm_purple1;
}

.megamenu>.dropdown .btn-group:not(.open)>.btn:focus, .megamenu>.dropdown .btn-group:not(.open) .btn.module-name:focus {
  outline: dotted 1px @cstm_purple1;
}

.module-list .megamenu>.dropdown .module-name:focus, .module-list .megamenu>.dropdown .module-name:hover {
  color: @cstm_purple1;
}

a:link, a:visited {
  color: @cstm_purple1;
}

.btn.btn-link:not(.disabled):hover {
  color: @cstm_purple1;
}

.btn>.fa {
  color: @cstm_purple1;
}

.navbar .megamenu>.dropdown:hover .btn-group>.btn, .navbar .megamenu>.dropdown:hover .btn-group>.btn:hover {
  color: @cstm_purple1;
}

.select2-results li div:hover, .select2-results .select2-highlighted {
  background: @cstm_purple1;
}

textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus {
  border-color: @cstm_purple1 !important;
}

footer .logo img {
  max-height: 29px;
}

RE: Chart Color Scheme

Michael Attea — Thu, 02 Sep 2021 15:43:20 GMT

this enhancement seems like a no brainers that nearly all sugar users would want to see in play.

And really shouldn't be too complex? Not sure why it hasn't been implemented.

RE: Chart Color Scheme

Brenda Rossetto — Thu, 02 Sep 2021 14:05:45 GMT

Hi Leaya, that would definitely be helpful! There is actually an open enhancement request for this feature: bug #46555. If you want to share your desire for the feature, you could contact Support so they can add your request for tracking purposes. Then Sugar will have a more accurate understanding of how many people are interested. 🙂

-Brenda