Compare commits

..

4 Commits

Author SHA1 Message Date
Deep Tailor
81b4e7848b only clear data 2019-09-06 17:13:18 -07:00
Andrew Henry
003c3e9fbe Do not attempt to select cells with no column defined 2019-09-06 15:54:44 -07:00
Charles Hacskaylo
02ef58ced1 Fixes normalize.min.css (#2467)
- Add as slightly renamed .scss file to avoid issues arising from
.gitignore excluding .css files;
2019-09-03 13:33:24 -07:00
Charles Hacskaylo
e89881c266 Fix Y axis plot label control (#2465)
* Fix Y axis plot label control
* Now uses writing-mode: vertical-lr instead of transform for vertical
text;
* Text overflow: hidden prevents scrollbars;
* Select displayed on hover over Y axis area;
* Dynamically adds icon-gear when Y axis can be configured;
* use child plot div for image exports
2019-09-03 11:10:02 -07:00
8 changed files with 50 additions and 42 deletions

View File

@@ -1,7 +1,7 @@
<template>
<div class="c-indicator c-indicator--clickable icon-clear-data s-status-caution">
<span class="label c-indicator__label">
<button @click="globalClearEmit">Clear All Data</button>
<button @click="globalClearEmit">Clear Data</button>
</span>
</div>
</template>

View File

@@ -110,25 +110,25 @@
</div>
<div class="plot-wrapper-axis-and-display-area flex-elem grows">
<div class="gl-plot-axis-area gl-plot-y"
<div class="gl-plot-axis-area gl-plot-y has-local-controls"
ng-style="{
width: (tickWidth + 30) + 'px'
}">
<div class="gl-plot-label gl-plot-y-label" ng-if="!yKeyOptions">
{{ yAxis.get('label') }}
<div class="gl-plot-label gl-plot-y-label"
ng-class="{'icon-gear': (yKeyOptions.length > 1 && series.length === 1)}"
ng-bind="yAxisLabel">
</div>
<div class="gl-plot-label gl-plot-y-label" ng-if="yKeyOptions.length > 1 && series.length === 1">
<select class="gl-plot-y-label__select"
ng-model="yAxisLabel" ng-change="plot.toggleYAxisLabel(yAxisLabel, yKeyOptions, series[0])">
<option ng-repeat="option in yKeyOptions"
value="{{option.name}}"
ng-selected="option.name === yAxisLabel">
{{option.name}}
</option>
</select>
</div>
<select class="gl-plot-y-label__select local-controls--hidden"
ng-if="yKeyOptions.length > 1 && series.length === 1"
ng-model="yAxisLabel" ng-change="plot.toggleYAxisLabel(yAxisLabel, yKeyOptions, series[0])">
<option ng-repeat="option in yKeyOptions"
value="{{option.name}}"
ng-selected="option.name === yAxisLabel">
{{option.name}}
</option>
</select>
<mct-ticks axis="yAxis">

View File

@@ -526,6 +526,7 @@ define([
if (yAxisObject) {
series.emit('change:yKey', yAxisObject.key);
this.$scope.yAxisLabel = label;
}
};

View File

@@ -269,7 +269,7 @@ define([
PlotController.prototype.clearData = function () {
this.config.series.forEach(function (series) {
series.refresh();
series.reset();
});
};
@@ -277,22 +277,18 @@ define([
* Export view as JPG.
*/
PlotController.prototype.exportJPG = function () {
this.hideExportButtons = true;
this.exportImageService.exportJPG(this.$element[0], 'plot.jpg', 'export-plot')
.finally(function () {
this.hideExportButtons = false;
}.bind(this));
var plotElement = this.$element.children()[1];
this.exportImageService.exportJPG(plotElement, 'plot.jpg', 'export-plot');
};
/**
* Export view as PNG.
*/
PlotController.prototype.exportPNG = function () {
this.hideExportButtons = true;
this.exportImageService.exportPNG(this.$element[0], 'plot.png', 'export-plot')
.finally(function () {
this.hideExportButtons = false;
}.bind(this));
var plotElement = this.$element.children()[1];
this.exportImageService.exportPNG(plotElement, 'plot.png', 'export-plot');
};
PlotController.prototype.toggleCursorGuide = function ($event) {

View File

@@ -187,6 +187,11 @@ define([
}
}
clearData() {
this.filteredRows.clear();
this.boundedRows.clear();
}
getColumnMapForObject(objectKeyString) {
let columns = this.configuration.getColumns();

View File

@@ -75,7 +75,7 @@ define([
component.isEditing = editMode;
},
onClearData() {
table.refreshData();
table.clearData();
},
destroy: function (element) {
component.$destroy();

View File

@@ -64,7 +64,8 @@ export default {
return this.row.getFormattedValue(this.columnKey);
},
isSelectable() {
return this.row.columns[this.columnKey].selectable;
let column = this.row.columns[this.columnKey];
return column && column.selectable;
}
}
};

View File

@@ -126,6 +126,12 @@ mct-plot {
bottom: nth($plotDisplayArea, 3);
left: 0;
width: $plotYBarW;
&:hover {
.gl-plot-y-label__select {
display: block;
}
}
}
}
@@ -162,24 +168,23 @@ mct-plot {
}
&.gl-plot-y-label {
$x: -50%;
$r: -90deg;
transform-origin: 50% 0;
transform: translateX($x) rotate($r);
display: inline-block;
margin-left: $interiorMargin; // Kick off the left edge
left: 0;
top: 50%;
white-space: nowrap;
select {
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3e%3cpath fill='%23#{svgColorFromHex($colorSelectArw)}' d='M0 5l5 5V0L0 5z'/%3e%3c/svg%3e");
background-position: left .4em top 50%, 0 0;
padding: 1px $interiorMargin 1px 20px;
}
display: block;
left: 0; top: 0; right: auto; bottom: 0;
padding-left: 5px;
text-orientation: mixed;
overflow: hidden;
writing-mode: vertical-lr;
}
}
.gl-plot-y-label__select {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 20px;
z-index: 10;
}
.gl-plot-x-options,
.gl-plot-y-options {
$h: 24px;