Skip to content

Commit

Permalink
Translate Area, Line, Horizontal and Vertical Bar (elastic#23823)
Browse files Browse the repository at this point in the history 
Translation of Line, Area, Vertical and Horizontal Bar visualization components
  • Loading branch information
@tibmt
tibmt authored Oct 18, 2018
1 parent c5d9583 commit 58ba301
Show file tree
Hide file tree
Showing 9 changed files with 304 additions and 173 deletions.
16 changes: 8 additions & 8 deletions src/core_plugins/kbn_vislib_vis_types/public/area.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,14 @@ import { Schemas } from 'ui/vis/editors/default/schemas';
import { CATEGORY } from 'ui/vis/vis_category';
import pointSeriesTemplate from './editors/point_series.html';

export default function PointSeriesVisType(Private) {
export default function PointSeriesVisType(Private, i18n) {
const VisFactory = Private(VisFactoryProvider);

return VisFactory.createVislibVisualization({
name: 'area',
title: 'Area',
title: i18n('kbnVislibVisTypes.area.areaTitle', { defaultMessage: 'Area' }),
icon: 'visArea',
description: 'Emphasize the quantity beneath a line chart',
description: i18n('kbnVislibVisTypes.area.areaDescription', { defaultMessage: 'Emphasize the quantity beneath a line chart' }),
category: CATEGORY.BASIC,
visConfig: {
defaults: {
Expand Down Expand Up @@ -140,7 +140,7 @@ export default function PointSeriesVisType(Private) {
{
group: 'metrics',
name: 'metric',
title: 'Y-Axis',
title: i18n('kbnVislibVisTypes.area.metricsTitle', { defaultMessage: 'Y-Axis' }),
aggFilter: ['!geo_centroid', '!geo_bounds'],
min: 1,
defaults: [
Expand All @@ -150,31 +150,31 @@ export default function PointSeriesVisType(Private) {
{
group: 'metrics',
name: 'radius',
title: 'Dot Size',
title: i18n('kbnVislibVisTypes.area.radiusTitle', { defaultMessage: 'Dot Size' }),
min: 0,
max: 1,
aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality']
},
{
group: 'buckets',
name: 'segment',
title: 'X-Axis',
title: i18n('kbnVislibVisTypes.area.segmentTitle', { defaultMessage: 'X-Axis' }),
min: 0,
max: 1,
aggFilter: ['!geohash_grid', '!filter']
},
{
group: 'buckets',
name: 'group',
title: 'Split Series',
title: i18n('kbnVislibVisTypes.area.groupTitle', { defaultMessage: 'Split Series' }),
min: 0,
max: 3,
aggFilter: ['!geohash_grid', '!filter']
},
{
group: 'buckets',
name: 'split',
title: 'Split Chart',
title: i18n('kbnVislibVisTypes.area.splitTitle', { defaultMessage: 'Split Chart' }),
min: 0,
max: 1,
aggFilter: ['!geohash_grid', '!filter']
Expand Down
91 changes: 58 additions & 33 deletions src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/category_axis.html
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,33 @@
<div class="kuiSideBarSection kuiSideBarSection__main">
<div class="kuiSideBarSectionTitle">
<div class="kuiSideBarSectionTitle__text">
X-Axis
</div>
<div
class="kuiSideBarSectionTitle__text"
i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.xAxisTitle"
i18n-default-message="X-Axis"
></div>
</div>

<!-- General -->
<div class="kuiSideBarSection">
<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="categoryAxisShow">
Show
</label>
<label
class="kuiSideBarFormRow__label"
for="categoryAxisShow"
i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.showLabel"
i18n-default-message="Show"
></label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="categoryAxisShow" type="checkbox" ng-model="editorState.params.categoryAxes[0].show">
</div>
</div>

<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="categoryAxisPosition">
Position
</label>
<label
class="kuiSideBarFormRow__label"
for="categoryAxisPosition"
i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.positionLabel"
i18n-default-message="Position"
></label>
<div class="kuiSideBarFormRow__control">
<select
id="categoryAxisPosition"
Expand All @@ -43,46 +51,60 @@
ng-class="{ 'fa-caret-down': isCategoryAxisAdvancedOptionsOpen, 'fa-caret-right': !isCategoryAxisAdvancedOptionsOpen }"
class="kuiIcon fa-caret-right kuiSideBarOptionsLink__caret"
></span>
<span class="kuiSideBarOptionsLink__text">
<span ng-show="!isCategoryAxisAdvancedOptionsOpen">
Show
</span>
<span ng-show="isCategoryAxisAdvancedOptionsOpen">
Hide
</span>
Advanced Options
</span>
<span
class="kuiSideBarOptionsLink__text"
ng-show="!isCategoryAxisAdvancedOptionsOpen"
i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.showAdvancedOptionsLabel"
i18n-default-message="Show Advanced Options"
></span>
<span
class="kuiSideBarOptionsLink__text"
ng-show="isCategoryAxisAdvancedOptionsOpen"
i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.hideAdvancedOptionsLabel"
i18n-default-message="Hide Advanced Options"
></span>
</a>

<div ng-show="isCategoryAxisAdvancedOptionsOpen">
<!-- Labels -->
<div class="kuiSideBarSection">
<h6 class="kuiSideBarFormSectionTitle">
Labels
</h6>
<h6
class="kuiSideBarFormSectionTitle"
i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.labelsTitle"
i18n-default-message="Labels"
></h6>

<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="categoryAxisShowLabels">
Show Labels
</label>
<label
class="kuiSideBarFormRow__label"
for="categoryAxisShowLabels"
i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.showLabelsLabel"
i18n-default-message="Show Labels"
></label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="categoryAxisShowLabels" type="checkbox" ng-model="editorState.params.categoryAxes[0].labels.show">
</div>
</div>

<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="categoryAxisShowFilter">
Filter Labels
</label>
<label
class="kuiSideBarFormRow__label"
for="categoryAxisShowFilter"
i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.filterLabelsLabel"
i18n-default-message="Filter Labels"
></label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="categoryAxisShowFilter" type="checkbox" ng-model="editorState.params.categoryAxes[0].labels.filter">
</div>
</div>

<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="categoryAxisRotateLabels">
Rotate
</label>
<label
class="kuiSideBarFormRow__label"
for="categoryAxisRotateLabels"
i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.rotateLabel"
i18n-default-message="Rotate"
></label>
<div class="kuiSideBarFormRow__control">
<select
id="categoryAxisRotateLabels"
Expand All @@ -94,9 +116,12 @@ <h6 class="kuiSideBarFormSectionTitle">
</div>

<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="categoryAxisTruncateLabels">
Truncate
</label>
<label
class="kuiSideBarFormRow__label"
for="categoryAxisTruncateLabels"
i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.truncateLabel"
i18n-default-message="Truncate"
></label>
<div class="kuiSideBarFormRow__control">
<input
id="categoryAxisTruncateLabels"
Expand Down
32 changes: 22 additions & 10 deletions src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/grid.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,36 +13,48 @@
ng-class="{ 'fa-caret-down': isGridOpen, 'fa-caret-right': !isGridOpen }"
class="kuiIcon fa-caret-right kuiSideBarCollapsibleTitle__caret"
></span>
<span class="kuiSideBarCollapsibleTitle__text">
Grid
</span>
<span
class="kuiSideBarCollapsibleTitle__text"
i18n-id="kbnVislibVisTypes.controls.pointSeries.gridAxis.gridText"
i18n-default-message="Grid"
></span>
</div>
</div>

<div id="visGridOptions" ng-show="isGridOpen" class="kuiSideBarCollapsibleSection">
<!-- General -->
<div class="kuiSideBarSection">
<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="showCategoryLines">
X-Axis Lines
</label>
<label
class="kuiSideBarFormRow__label"
for="showCategoryLines"
i18n-id="kbnVislibVisTypes.controls.pointSeries.gridAxis.xAxisLinesLabel"
i18n-default-message="X-Axis Lines"
></label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="showCategoryLines" type="checkbox" ng-model="editorState.params.grid.categoryLines">
</div>
</div>

<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="gridAxis">
Y-Axis Lines
</label>
<label
class="kuiSideBarFormRow__label"
for="gridAxis"
i18n-id="kbnVislibVisTypes.controls.pointSeries.gridAxis.yAxisLinesLabel"
i18n-default-message="Y-Axis Lines"
></label>
<div class="kuiSideBarFormRow__control">
<select
id="gridAxis"
class="kuiSelect kuiSideBarSelect"
ng-model="editorState.params.grid.valueAxis"
ng-options="axis.id as axis.name for axis in editorState.params.valueAxes track by axis.id"
>
<option value="">Don't show</option>
<option
value=""
i18n-id="kbnVislibVisTypes.controls.pointSeries.gridAxis.dontShowLabel"
i18n-default-message="Don't show"
></option>
</select>
</div>
</div>
Expand Down
76 changes: 51 additions & 25 deletions src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
<div class="kuiSideBarSection kuiSideBarSection__main">
<div class="kuiSideBarSectionTitle">
<div class="kuiSideBarSectionTitle__text">
Metrics
</div>
<div
class="kuiSideBarSectionTitle__text"
i18n-id="kbnVislibVisTypes.controls.pointSeries.series.metricsTitle"
i18n-default-message="Metrics"
></div>
</div>

<div
Expand Down Expand Up @@ -35,9 +37,12 @@
<div class="kuiSideBarSection">

<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="{{ 'seriesType' + $index }}">
Chart Type
</label>
<label
class="kuiSideBarFormRow__label"
for="{{ 'seriesType' + $index }}"
i18n-id="kbnVislibVisTypes.controls.pointSeries.series.chartTypeLabel"
i18n-default-message="Chart Type"
></label>
<div class="kuiSideBarFormRow__control">
<select
id="{{ 'seriesType' + $index }}"
Expand All @@ -49,9 +54,12 @@
</div>

<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="{{ 'seriesMode' + $index }}">
Mode
</label>
<label
class="kuiSideBarFormRow__label"
for="{{ 'seriesMode' + $index }}"
i18n-id="kbnVislibVisTypes.controls.pointSeries.series.modeLabel"
i18n-default-message="Mode"
></label>
<div class="kuiSideBarFormRow__control">
<select
id="{{ 'seriesMode' + $index }}"
Expand All @@ -63,9 +71,12 @@
</div>

<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="{{ 'seriesValueAxis' + $index }}">
Value Axis
</label>
<label
class="kuiSideBarFormRow__label"
for="{{ 'seriesValueAxis' + $index }}"
i18n-id="kbnVislibVisTypes.controls.pointSeries.series.valueAxisLabel"
i18n-default-message="Value Axis"
></label>
<div class="kuiSideBarFormRow__control">
<select
id="{{ 'seriesValueAxis' + $index }}"
Expand All @@ -74,16 +85,23 @@
ng-change="changeValueAxis($index)"
>
<option ng-repeat="axis in editorState.params.valueAxes track by axis.id" value="{{axis.id}}">{{axis.name}}</option>
<option value="new">New Axis ...</option>
<option
value="new"
i18n-id="kbnVislibVisTypes.controls.pointSeries.series.newAxisLabel"
i18n-default-message="New Axis…"
></option>
</select>
</div>
</div>

<div ng-show="chart.type == 'line' || chart.type == 'area'">
<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="{{ 'lineMode' + $index }}">
Line Mode
</label>
<label
class="kuiSideBarFormRow__label"
for="{{ 'lineMode' + $index }}"
i18n-id="kbnVislibVisTypes.controls.pointSeries.series.lineModeLabel"
i18n-default-message="Line Mode"
></label>
<div class="kuiSideBarFormRow__control">
<select
id="{{ 'lineMode' + $index }}"
Expand All @@ -97,27 +115,35 @@
</div>
<div ng-show="chart.type == 'line'">
<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="{{ 'drawLines' + $index }}">
Show Line
</label>
<label
class="kuiSideBarFormRow__label"
for="{{ 'drawLines' + $index }}"
i18n-id="kbnVislibVisTypes.controls.pointSeries.series.showLineLabel"
i18n-default-message="Show Line"
></label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="{{ 'drawLines' + $index }}" type="checkbox" ng-model="chart.drawLinesBetweenPoints">
</div>
</div>

<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="{{ 'showCircles' + $index }}">
Show Circles
</label>
<label
class="kuiSideBarFormRow__label"
for="{{ 'showCircles' + $index }}"
i18n-id="kbnVislibVisTypes.controls.pointSeries.series.showCirclesLabel"
i18n-default-message="Show Circles"
></label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="{{ 'showCircles' + $index }}" type="checkbox" ng-model="chart.showCircles">
</div>
</div>

<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label">
Line Width
</label>
<label
class="kuiSideBarFormRow__label"
i18n-id="kbnVislibVisTypes.controls.pointSeries.series.lineWidthLabel"
i18n-default-message="Line Width"
></label>
<div class="kuiSideBarFormRow__control">
<input name="lineWidth"
class="kuiInput kuiSideBarInput"
Expand Down
Loading

0 comments on commit 58ba301

Please sign in to comment.