Update Vislib Axis #7961

ppisljar · 2016-08-09T07:27:13Z

Update Vislib Axis classes

this PR creates some changes around Vislib.

it replaces YAxis and XAxis by a single Axis class. this allows us to easily switch them (to create horizontal column charts for example)
it puts AxisTitle inside of Axis (as they are dependant)
it makes Axis more customizable (labels, title, lines, position ... everything is customizable)
it splits Axis in smaller subclasses (Axis, AxisLabels, AxisTitle and AxisScale)
it makes it possible to add multiple axes to one chart (like multiple Y, multiple X .. one left one right .. two left ... you name it)

however none of the features were actually added to kibana. this is just a ground work to make that happen in the future. for now merging this PR should have 0 impact for users, charts should look and feel exactly the same and everything should work exactly the same.

its very possible that options don't work/don't work correctly yet (like setting categoryaxis position to top and yaxis position to right, setting weird fonts and rotations ....) i plan to tackle all that in the future when adding the features to kibana (when i'll have an easy way to check all the possible options kibana offers).

also i updated some other parts of the vislib to use the first axis for now (when you can add multiple). in the future i plan to do some changes to the charts as well to allow using multiple axes and some other things (like having different chart types together (line + bar )

i didn't yet update/write tests, i would first like to get some opinions.

known issues:

endzones are shown where there shouldn't be
labels dont render correctly

ppisljar · 2016-08-09T07:28:20Z

src/core_plugins/kbn_vislib_vis_types/public/controls/point_series_options.js

+            else buckets++;
+          });
+
+          if (metrics < 2 || buckets !== 1) return false;


only show this option if we have 1 bucket only (doesn't make much sense with multiple buckets ...)

Bargs · 2016-08-12T18:00:12Z

I'm happy to give this a review from a user perspective and a general code quality standpoint, but I'm not really qualified to say if this is the proper way to implement things in the vislib. You might need to grab @spalger for that.

Bargs · 2016-08-12T18:02:02Z

There are some spacing issues in the current implementation:

Bargs · 2016-08-12T18:05:22Z

Seperate Y Axises should be Separate Y Axes

Bargs · 2016-08-12T18:09:52Z

Do you think this would be useful for area charts at all?

Bargs · 2016-08-12T18:11:30Z

I think we need some way to show which axis applies to which bar/line. Right now it's impossible to tell without comparing the size of the bars to the values in the tooltips.

ppisljar · 2016-08-15T12:38:56Z

after the explanation Spencer gave on vislib i think im gonna change this implementation completely

- change yAxis to ValueAxis - add more customization options to ValueAxis

- change yAxis to ValueAxis - add more customization options to ValueAxis - allow label rotation - allow label truncate - allow time domain

ppisljar · 2016-08-30T15:09:35Z

i updated PR name and description ... please check on top

spalger · 2016-08-30T18:30:55Z

src/ui/public/vislib/lib/axis.js


-    return this.axis;
+  Axis.prototype.getScale = function () {
+    return this.scale.scale;


Is this defined before this.createScale() is called?

Why split this function in two?

spalger · 2016-09-02T18:48:39Z

src/core_plugins/kbn_vislib_vis_types/public/controls/point_series_options.js

+        })();
+
+        if (result === false) {
+          $scope.vis.params.splitYAxis = false;


This seems like a weird place to put this. Can you explain why it's here?

ppisljar · 2016-09-04T12:05:12Z

@spalger what do you think about classes being wrapped in factories here ? i don't see any real benefits, just unnecessary complication to the code ?

spalger · 2016-09-04T18:59:11Z

I think the reason it is done is so that they can be "angular-ized", which may not still be necessary but I bet it is. It is probably better that everything be in a Provider rather than just parts of the vislib, but maybe you disagree

`v95.7.0` ⏩ `v95.9.0` > [!CAUTION] > This PR contains the final set of Emotion conversions for all EuiForm components. > If your plugin contains any custom CSS/styling to **EuiFormRow, EuiFormControlLayout, EuiCheckbox, EuiRadio, or EuiSwitch**, ⚠️ make sure to QA your UI to ensure no visual regressions have occurred! ⚠️ --- ## [`v95.9.0`](https://github.com/elastic/eui/releases/v95.9.0) - Updated `EuiSearchBar`'s optional `box.schema` prop with a new `recognizedFields` configuration. This allows specifying the phrases that will be parsed as field clauses ([#7960](elastic/eui#7960)) - Updated `EuiIcon` with a new `tokenSemanticText` glyph ([#7971](elastic/eui#7971)) - Added support for TypeScript 5 ([#7980](elastic/eui#7980)) **Bug fixes** - Fixed `EuiSelectableTemplateSitewide` styles when used within a dark-themed `EuiHeader` ([#7977](elastic/eui#7977)) ## [`v95.8.0`](https://github.com/elastic/eui/releases/v95.8.0) - Updated `EuiHeaderLinks`'s mobile menu to set a slight popover padding by default ([#7961](elastic/eui#7961)) - This can be overridden via `popoverProps.panelPaddingSize` if needed. - Updated `EuiHeaderLink` to default to a size of `s` (down from `m`) ([#7961](elastic/eui#7961)) **Accessibility** - Updated the `aria-label` attribute for the `EuiFieldSearch` clear button ([#7970](elastic/eui#7970)) **Bug fixes** - Fixed a visual bug with `<EuiDualRange showInput="inputWithPopover" />` form controls ([#7957](elastic/eui#7957)) **Deprecations** - Deprecated `EuiFormRow`'s `columnCompressedSwitch` display prop. Use `columnCompressed` instead, which will automatically account for child `EuiSwitch`es ([#7968](elastic/eui#7968)) - Deprecated `EuiFormRow`'s `rowCompressed` display prop. Use `row` instead for vertical forms, or `centerCompressed` for inline forms ([#7968](elastic/eui#7968)) - (Styling) Updated `EuiFormRow`'s `hasEmptySpaceLabel` prop to no longer attempt to automatically align its content to a vertical center. Use the `display="center"` prop for that instead ([#7968](elastic/eui#7968)) **CSS-in-JS conversions** - Converted `EuiFormControlLayout` to Emotion ([#7954](elastic/eui#7954)) - Removed `.euiFormControlLayout--*icons` classNames and `--eui-form-control-layout-icons-padding` CSS var. Use `--euiFormControlRightIconsCount` or `--euiFormControlLeftIconsCount` instead - Converted `EuiFormLayoutDelimited` to Emotion ([#7957](elastic/eui#7957)) - Fixed `cloneElementWithCss` throwing an error when used multiple times without a `key` prop ([#7957](elastic/eui#7957)) - Updated `cloneElementWithCss` utility to support a third argument that allows prepending vs. appending the cloned Emotion css className ([#7957](elastic/eui#7957)) - Removed `@euiFormControlLayoutClearIcon` Sass mixin ([#7959](elastic/eui#7959)) - Converted `EuiDescribedFormGroup` to Emotion ([#7964](elastic/eui#7964)) - Converted `EuiForm`, `EuiFormHelpText`, and `EuiFormErrorText` to Emotion ([#7966](elastic/eui#7966)) - Converted `EuiFormLabel` and `EuiFormLegend` to Emotion; Removed `@euiFormLabel` mixin ([#7967](elastic/eui#7967)) - Converted `EuiFormRow` to Emotion ([#7968](elastic/eui#7968)) - Converted `EuiCheckbox` to Emotion ([#7969](elastic/eui#7969)) - Converted `EuiRadio` to Emotion ([#7969](elastic/eui#7969)) - Converted `EuiSwitch` to Emotion ([#7969](elastic/eui#7969)) - Removed the following Sass variables: ([#7969](elastic/eui#7969)) - `$euiFormCustomControlDisabledIconColor` - `$euiFormCustomControlBorderColor` - `$euiRadioSize` - `$euiCheckBoxSize` - `$euiCheckboxBorderRadius` - `$euiSwitchHeight` (and compressed/mini variants) - `$euiSwitchWidth` (and compressed/mini variants) - `$euiSwitchThumbSize` (and compressed/mini variants) - `$euiSwitchIconHeight` - `$euiSwitchOffColor` - Removed the following Sass mixins: ([#7969](elastic/eui#7969)) - `euiIconBackground` - `euiCustomControl` - `euiCustomControlSelected` - `euiCustomControlDisabled` - `euiCustomControlFocused` --------- Co-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>

ppisljar added the review label Aug 9, 2016

ppisljar assigned epixa and Bargs Aug 9, 2016

ppisljar reviewed Aug 9, 2016
View reviewed changes

ppisljar force-pushed the enh/multipleYAxis branch from 130ff6f to 554f659 Compare August 9, 2016 07:35

Bargs added updates_needed and removed review labels Aug 12, 2016

Bargs removed their assignment Aug 16, 2016

epixa removed their assignment Aug 17, 2016

ppisljar added 5 commits August 30, 2016 16:52

fixes elastic#2390 - multiple Y axises

dd4e733

- allow multiple y axes

9bde535

- change yAxis to ValueAxis - add more customization options to ValueAxis

- allow multiple y axes

3c3a843

- change yAxis to ValueAxis - add more customization options to ValueAxis - allow label rotation - allow label truncate - allow time domain

updating axis ... almoust there

a57f99c

updating axis

736cbec

ppisljar force-pushed the enh/multipleYAxis branch from fceaaca to 736cbec Compare August 30, 2016 14:53

ppisljar changed the title ~~Enh/multiple y axis~~ Update Vislib Axis Aug 30, 2016

ppisljar added the review label Aug 30, 2016

ppisljar assigned spalger Aug 30, 2016

ppisljar added 5 commits August 30, 2016 17:34

updating axis for area and column charts

b3b7826

updating default color to #ddd

ad15255

updating paddings

41eb555

let to const

06042ac

party fixing endzones issue

9864f49

ppisljar added 2 commits August 30, 2016 18:47

updated axis min size (as they might not be shown)

9aed759

updating based on spencers comments

137d289

spalger reviewed Aug 30, 2016
View reviewed changes

spalger removed the updates_needed label Aug 30, 2016

ppisljar added 3 commits August 31, 2016 10:34

fixing boundaries and title issues

b6ff697

converting axes objects to array

e7e8961

fixing area chart

d7c8386

spalger reviewed Sep 2, 2016
View reviewed changes

converting to es6 class syntax

a31083a

ppisljar added the Feature:Vislib Vislib chart implementation label Sep 5, 2016

ppisljar added 2 commits September 5, 2016 15:33

some small fixes

cebe795

fixing style

2c0a3da

ppisljar mentioned this pull request Sep 7, 2016

Vislib/axis #8174

Closed

ppisljar closed this Sep 7, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update Vislib Axis #7961

Update Vislib Axis #7961

ppisljar commented Aug 9, 2016 •

edited

Loading

ppisljar Aug 9, 2016

Bargs commented Aug 12, 2016

Bargs commented Aug 12, 2016

Bargs commented Aug 12, 2016

Bargs commented Aug 12, 2016

Bargs commented Aug 12, 2016

ppisljar commented Aug 15, 2016

ppisljar commented Aug 30, 2016

spalger Aug 30, 2016

spalger Aug 30, 2016

spalger Sep 2, 2016

ppisljar commented Sep 4, 2016

spalger commented Sep 4, 2016

Update Vislib Axis #7961

Update Vislib Axis #7961

Conversation

ppisljar commented Aug 9, 2016 • edited Loading

ppisljar Aug 9, 2016

Choose a reason for hiding this comment

Bargs commented Aug 12, 2016

Bargs commented Aug 12, 2016

Bargs commented Aug 12, 2016

Bargs commented Aug 12, 2016

Bargs commented Aug 12, 2016

ppisljar commented Aug 15, 2016

ppisljar commented Aug 30, 2016

spalger Aug 30, 2016

Choose a reason for hiding this comment

spalger Aug 30, 2016

Choose a reason for hiding this comment

spalger Sep 2, 2016

Choose a reason for hiding this comment

ppisljar commented Sep 4, 2016

spalger commented Sep 4, 2016

ppisljar commented Aug 9, 2016 •

edited

Loading