Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve the calendar heatmap #4800

Merged
merged 4 commits into from
Apr 13, 2018
Merged

Improve the calendar heatmap #4800

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c93cffe
Improve xAxis ticks, thinner bottom margin (#4756)
mistercrunch Apr 10, 2018
cab8ddf
Addressing comments
mistercrunch Apr 12, 2018
2b7d381
Set cell_padding to 0
mistercrunch Apr 12, 2018
b85b5ef
merging db migrations
mistercrunch Apr 12, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions superset/assets/javascripts/chart/Chart.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,10 @@ class Chart extends React.PureComponent {
this.props.actions.chartRenderingFailed(e, this.props.chartKey);
}

verboseMetricName(metric) {
return this.props.datasource.verbose_map[metric] || metric;
}

render_template(s) {
const context = {
width: this.width(),
Expand Down
57 changes: 56 additions & 1 deletion superset/assets/javascripts/explore/stores/controls.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,6 +230,7 @@ export const controls = {
default: colorPrimary,
renderTrigger: true,
},

legend_position: {
label: t('Legend Position'),
description: t('Choose the position of the legend'),
Expand Down Expand Up @@ -324,11 +325,17 @@ export const controls = {
label: t('Linear Color Scheme'),
choices: [
['fire', 'fire'],
['blue_white_yellow', 'blue/white/yellow'],
['white_black', 'white/black'],
['black_white', 'black/white'],
['dark_blue', 'light/dark blue'],
['pink_grey', 'pink/white/grey'],
['greens', 'greens'],
['purples', 'purples'],
['oranges', 'oranges'],
['blue_white_yellow', 'blue/white/yellow'],
['red_yellow_blue', 'red/yellowish/blue'],
['brown_white_green', 'brown/white/green'],
['purple_white_green', 'purple/white/green'],
],
default: 'blue_white_yellow',
clearable: false,
Expand Down Expand Up @@ -1006,6 +1013,46 @@ export const controls = {
'relative to the time granularity selected'),
},

cell_size: {
type: 'TextControl',
isInt: true,
default: 10,
validators: [v.integer],
renderTrigger: true,
label: t('Cell Size'),
description: t('The size of the square cell, in pixels'),
},

cell_padding: {
type: 'TextControl',
isInt: true,
validators: [v.integer],
renderTrigger: true,
default: 0,
label: t('Cell Padding'),
description: t('The distance between cells, in pixels'),
},

cell_radius: {
type: 'TextControl',
isInt: true,
validators: [v.integer],
renderTrigger: true,
default: 0,
label: t('Cell Radius'),
description: t('The pixel radius'),
},

steps: {
type: 'TextControl',
isInt: true,
validators: [v.integer],
renderTrigger: true,
default: 10,
label: t('Color Steps'),
description: t('The number color "steps"'),
},

grid_size: {
type: 'TextControl',
label: t('Grid Size'),
Expand Down Expand Up @@ -1462,6 +1509,14 @@ export const controls = {
description: t('Whether to display the numerical values within the cells'),
},

show_metric_name: {
type: 'CheckboxControl',
label: t('Show Metric Names'),
renderTrigger: true,
default: true,
description: t('Whether to display the metric name as a title'),
},

x_axis_showminmax: {
type: 'CheckboxControl',
label: t('X bounds'),
Expand Down
25 changes: 21 additions & 4 deletions superset/assets/javascripts/explore/stores/visTypes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -977,17 +977,34 @@ export const visTypes = {
label: t('Query'),
expanded: true,
controlSetRows: [
['metric'],
['domain_granularity', 'subdomain_granularity'],
['metrics'],
],
},
{
label: t('Options'),
label: t('Chart Options'),
expanded: true,
controlSetRows: [
['domain_granularity'],
['subdomain_granularity'],
['linear_color_scheme'],
['cell_size', 'cell_padding'],
['cell_radius', 'steps'],
['y_axis_format', 'x_axis_time_format'],
['show_legend', 'show_values'],
['show_metric_name', null],
],
},
],
controlOverrides: {
y_axis_format: {
label: t('Number Format'),
},
x_axis_time_format: {
label: t('Time Format'),
},
show_values: {
default: false,
},
},
},

box_plot: {
Expand Down
36 changes: 36 additions & 0 deletions superset/assets/javascripts/modules/colors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,42 @@ export const spectrums = {
'#FAFAFA',
'#666666',
],
greens: [
'#ffffcc',
'#78c679',
'#006837',
],
purples: [
'#f2f0f7',
'#9e9ac8',
'#54278f',
],
oranges: [
'#fef0d9',
'#fc8d59',
'#b30000',
],
red_yellow_blue: [
'#d7191c',
'#fdae61',
'#ffffbf',
'#abd9e9',
'#2c7bb6',
],
brown_white_green: [
'#a6611a',
'#dfc27d',
'#f5f5f5',
'#80cdc1',
'#018571',
],
purple_white_green: [
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've seen some functions in Python (matplotlib perhaps?) where you can interpolate between colors. It would be cool to have something similar here, if it exists in Javascript (something like this). Imagine:

const brown = '#a6611a';
const white = '#f5f5f5';
const green = '#018571';
...
const brown_white_green: interpolate([brown, white, green], 5),
...

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's what is happening here. Code in colors.js uses d3 scalers to do this given these objects.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool, #TIL.

'#7b3294',
'#c2a5cf',
'#f7f7f7',
'#a6dba0',
'#008837',
],
};

/**
Expand Down
1 change: 0 additions & 1 deletion superset/assets/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,6 @@
"bootstrap-slider": "^10.0.0",
"brace": "^0.10.0",
"brfs": "^1.4.3",
"cal-heatmap": "3.6.2",
"classnames": "^2.2.5",
"d3": "^3.5.17",
"d3-cloud": "^1.2.1",
Expand Down
145 changes: 145 additions & 0 deletions superset/assets/vendor/cal-heatmap/cal-heatmap.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
/* Cal-HeatMap CSS */

.cal-heatmap-container {
display: block;
}

.cal-heatmap-container .graph
{
font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
}

.cal-heatmap-container .graph-label
{
fill: #999;
font-size: 10px
}

.cal-heatmap-container .graph, .cal-heatmap-container .graph-legend rect {
shape-rendering: crispedges
}

.cal-heatmap-container .graph-rect
{
fill: #ededed
}

.cal-heatmap-container .graph-subdomain-group rect:hover
{
stroke: #000;
stroke-width: 1px
}

.cal-heatmap-container .subdomain-text {
font-size: 8px;
fill: #999;
pointer-events: none
}

.cal-heatmap-container .hover_cursor:hover {
cursor: pointer
}

.cal-heatmap-container .qi {
background-color: #999;
fill: #999
}

/*
Remove comment to apply this style to date with value equal to 0
.q0
{
background-color: #fff;
fill: #fff;
stroke: #ededed
}
*/

.cal-heatmap-container .q1
{
background-color: #dae289;
fill: #dae289
}

.cal-heatmap-container .q2
{
background-color: #cedb9c;
fill: #9cc069
}

.cal-heatmap-container .q3
{
background-color: #b5cf6b;
fill: #669d45
}

.cal-heatmap-container .q4
{
background-color: #637939;
fill: #637939
}

.cal-heatmap-container .q5
{
background-color: #3b6427;
fill: #3b6427
}

.cal-heatmap-container rect.highlight
{
stroke:#444;
stroke-width:1
}

.cal-heatmap-container text.highlight
{
fill: #444
}

.cal-heatmap-container rect.highlight-now
{
stroke: red
}

.cal-heatmap-container text.highlight-now
{
fill: red;
font-weight: 800
}

.cal-heatmap-container .domain-background {
fill: none;
shape-rendering: crispedges
}

.ch-tooltip {
padding: 10px;
background: #222;
color: #bbb;
font-size: 12px;
line-height: 1.4;
width: 140px;
position: absolute;
z-index: 99999;
text-align: center;
border-radius: 2px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
display: none;
box-sizing: border-box;
}

.ch-tooltip::after{
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
content: "";
padding: 0;
display: block;
bottom: -6px;
left: 50%;
margin-left: -6px;
border-width: 6px 6px 0;
border-top-color: #222;
}
Loading