cx 24.4.5 → 24.4.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/charts.js +10 -0
- package/dist/manifest.js +730 -730
- package/package.json +1 -1
- package/src/charts/Chart.js +75 -77
- package/src/charts/ColumnBarBase.d.ts +64 -64
- package/src/charts/ColumnBarGraphBase.d.ts +73 -73
- package/src/charts/Legend.js +150 -148
- package/src/charts/LineGraph.d.ts +92 -92
- package/src/charts/PieLabel.js +71 -71
- package/src/charts/ScatterGraph.d.ts +64 -64
- package/src/charts/axis/Axis.d.ts +96 -96
- package/src/charts/axis/Axis.js +6 -4
- package/src/charts/axis/CategoryAxis.d.ts +24 -22
- package/src/charts/axis/CategoryAxis.js +212 -225
- package/src/data/StringTemplate.spec.js +105 -105
- package/src/data/getAccessor.spec.js +11 -0
- package/src/svg/Text.d.ts +40 -40
- package/src/ui/Controller.d.ts +182 -182
- package/src/ui/Culture.js +129 -129
- package/src/ui/FocusManager.js +171 -171
- package/src/ui/Instance.d.ts +72 -72
- package/src/ui/index.d.ts +42 -42
- package/src/util/Console.d.ts +4 -4
- package/src/widgets/form/UploadButton.d.ts +34 -34
- package/src/widgets/grid/Grid.d.ts +22 -4
- package/src/widgets/grid/variables.scss +88 -88
|
@@ -1,64 +1,64 @@
|
|
|
1
|
-
import * as Cx from "../core";
|
|
2
|
-
import { PropertySelection, KeySelection } from "../ui/selection";
|
|
3
|
-
|
|
4
|
-
interface ScatterGraphProps extends Cx.StyledContainerProps {
|
|
5
|
-
/**
|
|
6
|
-
* Data for the graph. Each entry should be an object with at least two properties
|
|
7
|
-
* whose names should match the `xField` and `yField` values.
|
|
8
|
-
*/
|
|
9
|
-
data?: Cx.RecordsProp;
|
|
10
|
-
|
|
11
|
-
/** Size (width) of the column in axis units. */
|
|
12
|
-
size?: Cx.NumberProp;
|
|
13
|
-
|
|
14
|
-
shape?: Cx.StringProp;
|
|
15
|
-
|
|
16
|
-
/** Index of a color from the standard palette of colors. 0-15. */
|
|
17
|
-
colorIndex?: Cx.NumberProp;
|
|
18
|
-
|
|
19
|
-
/** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
|
|
20
|
-
colorMap?: Cx.StringProp;
|
|
21
|
-
|
|
22
|
-
/** Name used to resolve the color. If not provided, `name` is used instead. */
|
|
23
|
-
colorName?: Cx.StringProp;
|
|
24
|
-
|
|
25
|
-
/** Name of the item as it will appear in the legend. */
|
|
26
|
-
name?: Cx.StringProp;
|
|
27
|
-
|
|
28
|
-
/** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
|
|
29
|
-
active?: Cx.BooleanProp;
|
|
30
|
-
|
|
31
|
-
/** Base CSS class to be applied to the element. Defaults to `scattergraph`. */
|
|
32
|
-
baseClass?: string;
|
|
33
|
-
|
|
34
|
-
/**
|
|
35
|
-
* Name of the horizontal axis. The value should match one of the horizontal axes set
|
|
36
|
-
* in the `axes` configuration of the parent `Chart` component. Default value is `x`.
|
|
37
|
-
*/
|
|
38
|
-
xAxis?: string;
|
|
39
|
-
|
|
40
|
-
/**
|
|
41
|
-
* Name of the vertical axis. The value should match one of the vertical axes set
|
|
42
|
-
* in the `axes` configuration if the parent `Chart` component. Default value is `y`.
|
|
43
|
-
*/
|
|
44
|
-
yAxis?: string;
|
|
45
|
-
|
|
46
|
-
/** Name of the property which holds the x value. Default value is `x`. */
|
|
47
|
-
xField?: string;
|
|
48
|
-
|
|
49
|
-
/** Name of the property which holds the y value. Default value is `y`. */
|
|
50
|
-
yField?: string;
|
|
51
|
-
|
|
52
|
-
/** Name of the property which holds the size value. Do not set if `size` is used. */
|
|
53
|
-
sizeField?: string | false;
|
|
54
|
-
|
|
55
|
-
/** Name of the legend to be used. Default is legend. */
|
|
56
|
-
legend?: string;
|
|
57
|
-
|
|
58
|
-
legendAction?: string;
|
|
59
|
-
|
|
60
|
-
/** Selection configuration. */
|
|
61
|
-
selection?: { type: typeof PropertySelection | typeof KeySelection; [prop: string]: any };
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
export class ScatterGraph extends Cx.Widget<ScatterGraphProps> {}
|
|
1
|
+
import * as Cx from "../core";
|
|
2
|
+
import { PropertySelection, KeySelection } from "../ui/selection";
|
|
3
|
+
|
|
4
|
+
interface ScatterGraphProps extends Cx.StyledContainerProps {
|
|
5
|
+
/**
|
|
6
|
+
* Data for the graph. Each entry should be an object with at least two properties
|
|
7
|
+
* whose names should match the `xField` and `yField` values.
|
|
8
|
+
*/
|
|
9
|
+
data?: Cx.RecordsProp;
|
|
10
|
+
|
|
11
|
+
/** Size (width) of the column in axis units. */
|
|
12
|
+
size?: Cx.NumberProp;
|
|
13
|
+
|
|
14
|
+
shape?: Cx.StringProp;
|
|
15
|
+
|
|
16
|
+
/** Index of a color from the standard palette of colors. 0-15. */
|
|
17
|
+
colorIndex?: Cx.NumberProp;
|
|
18
|
+
|
|
19
|
+
/** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
|
|
20
|
+
colorMap?: Cx.StringProp;
|
|
21
|
+
|
|
22
|
+
/** Name used to resolve the color. If not provided, `name` is used instead. */
|
|
23
|
+
colorName?: Cx.StringProp;
|
|
24
|
+
|
|
25
|
+
/** Name of the item as it will appear in the legend. */
|
|
26
|
+
name?: Cx.StringProp;
|
|
27
|
+
|
|
28
|
+
/** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
|
|
29
|
+
active?: Cx.BooleanProp;
|
|
30
|
+
|
|
31
|
+
/** Base CSS class to be applied to the element. Defaults to `scattergraph`. */
|
|
32
|
+
baseClass?: string;
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* Name of the horizontal axis. The value should match one of the horizontal axes set
|
|
36
|
+
* in the `axes` configuration of the parent `Chart` component. Default value is `x`.
|
|
37
|
+
*/
|
|
38
|
+
xAxis?: string;
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* Name of the vertical axis. The value should match one of the vertical axes set
|
|
42
|
+
* in the `axes` configuration if the parent `Chart` component. Default value is `y`.
|
|
43
|
+
*/
|
|
44
|
+
yAxis?: string;
|
|
45
|
+
|
|
46
|
+
/** Name of the property which holds the x value. Default value is `x`. */
|
|
47
|
+
xField?: string;
|
|
48
|
+
|
|
49
|
+
/** Name of the property which holds the y value. Default value is `y`. */
|
|
50
|
+
yField?: string;
|
|
51
|
+
|
|
52
|
+
/** Name of the property which holds the size value. Do not set if `size` is used. */
|
|
53
|
+
sizeField?: string | false;
|
|
54
|
+
|
|
55
|
+
/** Name of the legend to be used. Default is `legend`. Set to `false` to hide the legend entry. */
|
|
56
|
+
legend?: string | false;
|
|
57
|
+
|
|
58
|
+
legendAction?: string;
|
|
59
|
+
|
|
60
|
+
/** Selection configuration. */
|
|
61
|
+
selection?: { type: typeof PropertySelection | typeof KeySelection; [prop: string]: any };
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
export class ScatterGraph extends Cx.Widget<ScatterGraphProps> {}
|
|
@@ -1,96 +1,96 @@
|
|
|
1
|
-
import { Instance } from "./../../ui/Instance.d";
|
|
2
|
-
import * as Cx from "../../core";
|
|
3
|
-
import { BoundedObject, BoundedObjectProps } from "../../svg/BoundedObject";
|
|
4
|
-
|
|
5
|
-
export interface AxisProps extends BoundedObjectProps {
|
|
6
|
-
/** Set to `true` for vertical axes. */
|
|
7
|
-
vertical?: boolean;
|
|
8
|
-
|
|
9
|
-
/** Used as a secondary axis. Displayed at the top/right. */
|
|
10
|
-
secondary?: boolean;
|
|
11
|
-
|
|
12
|
-
/** When set to `true`, the values are displayed in descending order. */
|
|
13
|
-
inverted?: Cx.BooleanProp;
|
|
14
|
-
|
|
15
|
-
/** When set to `true`, rendering of visual elements of the axis, such as ticks and labels, is skipped, but their function is preserved. */
|
|
16
|
-
hidden?: boolean;
|
|
17
|
-
|
|
18
|
-
tickSize?: number;
|
|
19
|
-
minTickDistance?: number;
|
|
20
|
-
minLabelDistanceVertical?: number;
|
|
21
|
-
minLabelDistanceHorizontal?: number;
|
|
22
|
-
|
|
23
|
-
/** Distance between labels and the axis. */
|
|
24
|
-
labelOffset?: number | string;
|
|
25
|
-
|
|
26
|
-
/** Label rotation angle in degrees. */
|
|
27
|
-
labelRotation?: Cx.Prop<number | string>;
|
|
28
|
-
|
|
29
|
-
/** Label text-anchor value. Allowed values are start, end and middle. Default value is set based on the value of vertical and secondary flags. */
|
|
30
|
-
labelAnchor?: "start" | "end" | "middle" | "auto";
|
|
31
|
-
|
|
32
|
-
/** Horizontal text offset. */
|
|
33
|
-
labelDx?: number | string;
|
|
34
|
-
|
|
35
|
-
/** Vertical text offset which can be used for vertical alignment. */
|
|
36
|
-
labelDy?: number | string;
|
|
37
|
-
|
|
38
|
-
/** Set to `true` to break long labels into multiple lines. Default value is `false`. Text is split at space characters. See also `labelMaxLineLength` and `labelLineCountDyFactor`. */
|
|
39
|
-
labelWrap?: boolean;
|
|
40
|
-
|
|
41
|
-
/**
|
|
42
|
-
* Used for vertical adjustment of multi-line labels. Default value is `auto` which means
|
|
43
|
-
* that value is initialized based on axis configuration. Value `0` means that label will grow towards
|
|
44
|
-
* the bottom of the screen. Value `-1` will make labels to grow towards the top of the screen.
|
|
45
|
-
* `-0.5` will make labels vertically centered.
|
|
46
|
-
*/
|
|
47
|
-
labelLineCountDyFactor?: number | string;
|
|
48
|
-
|
|
49
|
-
/**
|
|
50
|
-
* Used for vertical adjustment of multi-line labels. Default value is 1 which means
|
|
51
|
-
* that labels are stacked without any space between them. Value of 1.4 will add 40% of the label height as a space between labels.
|
|
52
|
-
*/
|
|
53
|
-
labelLineHeight?: number | string;
|
|
54
|
-
|
|
55
|
-
/** If `labelWrap` is on, this number is used as a measure to split labels into multiple lines. Default value is `10`. */
|
|
56
|
-
labelMaxLineLength?: number;
|
|
57
|
-
|
|
58
|
-
/** Set to true to hide the axis labels. */
|
|
59
|
-
hideLabels?: boolean;
|
|
60
|
-
|
|
61
|
-
/** Set to true to hide the axis line. */
|
|
62
|
-
hideLine?: boolean;
|
|
63
|
-
|
|
64
|
-
/** Set to true to hide the axis ticks. */
|
|
65
|
-
hideTicks?: boolean;
|
|
66
|
-
|
|
67
|
-
/** Additional CSS style to be applied to the axis line. */
|
|
68
|
-
lineStyle?: Cx.StyleProp;
|
|
69
|
-
|
|
70
|
-
/** Additional CSS style to be applied to the axis ticks. */
|
|
71
|
-
tickStyle?: Cx.StyleProp;
|
|
72
|
-
|
|
73
|
-
/** Additional CSS style to be applied to the axis labels. */
|
|
74
|
-
labelStyle?: Cx.StyleProp;
|
|
75
|
-
|
|
76
|
-
/** Additional CSS class to be applied to the axis line. */
|
|
77
|
-
lineClass?: Cx.ClassProp;
|
|
78
|
-
|
|
79
|
-
/** Additional CSS class to be applied to the axis ticks. */
|
|
80
|
-
tickClass?: Cx.ClassProp;
|
|
81
|
-
|
|
82
|
-
/** Additional CSS class to be applied to the axis labels. */
|
|
83
|
-
labelClass?: Cx.ClassProp;
|
|
84
|
-
|
|
85
|
-
onMeasured?: (info: any, instance: Instance) => void;
|
|
86
|
-
|
|
87
|
-
/** A function used to create a formatter function for axis labels. See Complex Labels example in the CxJS documentation for more info. */
|
|
88
|
-
onCreateLabelFormatter?:
|
|
89
|
-
| string
|
|
90
|
-
| ((
|
|
91
|
-
context: any,
|
|
92
|
-
instance: Instance
|
|
93
|
-
) => (formattedValue: string, value: any) => { text: string; style?: any; className?: string }[]);
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
export class Axis extends BoundedObject {}
|
|
1
|
+
import { Instance } from "./../../ui/Instance.d";
|
|
2
|
+
import * as Cx from "../../core";
|
|
3
|
+
import { BoundedObject, BoundedObjectProps } from "../../svg/BoundedObject";
|
|
4
|
+
|
|
5
|
+
export interface AxisProps extends BoundedObjectProps {
|
|
6
|
+
/** Set to `true` for vertical axes. */
|
|
7
|
+
vertical?: boolean;
|
|
8
|
+
|
|
9
|
+
/** Used as a secondary axis. Displayed at the top/right. */
|
|
10
|
+
secondary?: boolean;
|
|
11
|
+
|
|
12
|
+
/** When set to `true`, the values are displayed in descending order. */
|
|
13
|
+
inverted?: Cx.BooleanProp;
|
|
14
|
+
|
|
15
|
+
/** When set to `true`, rendering of visual elements of the axis, such as ticks and labels, is skipped, but their function is preserved. */
|
|
16
|
+
hidden?: boolean;
|
|
17
|
+
|
|
18
|
+
tickSize?: number;
|
|
19
|
+
minTickDistance?: number;
|
|
20
|
+
minLabelDistanceVertical?: number;
|
|
21
|
+
minLabelDistanceHorizontal?: number;
|
|
22
|
+
|
|
23
|
+
/** Distance between labels and the axis. */
|
|
24
|
+
labelOffset?: number | string;
|
|
25
|
+
|
|
26
|
+
/** Label rotation angle in degrees. */
|
|
27
|
+
labelRotation?: Cx.Prop<number | string>;
|
|
28
|
+
|
|
29
|
+
/** Label text-anchor value. Allowed values are start, end and middle. Default value is set based on the value of vertical and secondary flags. */
|
|
30
|
+
labelAnchor?: "start" | "end" | "middle" | "auto";
|
|
31
|
+
|
|
32
|
+
/** Horizontal text offset. */
|
|
33
|
+
labelDx?: number | string;
|
|
34
|
+
|
|
35
|
+
/** Vertical text offset which can be used for vertical alignment. */
|
|
36
|
+
labelDy?: number | string;
|
|
37
|
+
|
|
38
|
+
/** Set to `true` to break long labels into multiple lines. Default value is `false`. Text is split at space characters. See also `labelMaxLineLength` and `labelLineCountDyFactor`. */
|
|
39
|
+
labelWrap?: boolean;
|
|
40
|
+
|
|
41
|
+
/**
|
|
42
|
+
* Used for vertical adjustment of multi-line labels. Default value is `auto` which means
|
|
43
|
+
* that value is initialized based on axis configuration. Value `0` means that label will grow towards
|
|
44
|
+
* the bottom of the screen. Value `-1` will make labels to grow towards the top of the screen.
|
|
45
|
+
* `-0.5` will make labels vertically centered.
|
|
46
|
+
*/
|
|
47
|
+
labelLineCountDyFactor?: number | string;
|
|
48
|
+
|
|
49
|
+
/**
|
|
50
|
+
* Used for vertical adjustment of multi-line labels. Default value is 1 which means
|
|
51
|
+
* that labels are stacked without any space between them. Value of 1.4 will add 40% of the label height as a space between labels.
|
|
52
|
+
*/
|
|
53
|
+
labelLineHeight?: number | string;
|
|
54
|
+
|
|
55
|
+
/** If `labelWrap` is on, this number is used as a measure to split labels into multiple lines. Default value is `10`. */
|
|
56
|
+
labelMaxLineLength?: number;
|
|
57
|
+
|
|
58
|
+
/** Set to true to hide the axis labels. */
|
|
59
|
+
hideLabels?: boolean;
|
|
60
|
+
|
|
61
|
+
/** Set to true to hide the axis line. */
|
|
62
|
+
hideLine?: boolean;
|
|
63
|
+
|
|
64
|
+
/** Set to true to hide the axis ticks. */
|
|
65
|
+
hideTicks?: boolean;
|
|
66
|
+
|
|
67
|
+
/** Additional CSS style to be applied to the axis line. */
|
|
68
|
+
lineStyle?: Cx.StyleProp;
|
|
69
|
+
|
|
70
|
+
/** Additional CSS style to be applied to the axis ticks. */
|
|
71
|
+
tickStyle?: Cx.StyleProp;
|
|
72
|
+
|
|
73
|
+
/** Additional CSS style to be applied to the axis labels. */
|
|
74
|
+
labelStyle?: Cx.StyleProp;
|
|
75
|
+
|
|
76
|
+
/** Additional CSS class to be applied to the axis line. */
|
|
77
|
+
lineClass?: Cx.ClassProp;
|
|
78
|
+
|
|
79
|
+
/** Additional CSS class to be applied to the axis ticks. */
|
|
80
|
+
tickClass?: Cx.ClassProp;
|
|
81
|
+
|
|
82
|
+
/** Additional CSS class to be applied to the axis labels. */
|
|
83
|
+
labelClass?: Cx.ClassProp;
|
|
84
|
+
|
|
85
|
+
onMeasured?: (info: any, instance: Instance) => void;
|
|
86
|
+
|
|
87
|
+
/** A function used to create a formatter function for axis labels. See Complex Labels example in the CxJS documentation for more info. */
|
|
88
|
+
onCreateLabelFormatter?:
|
|
89
|
+
| string
|
|
90
|
+
| ((
|
|
91
|
+
context: any,
|
|
92
|
+
instance: Instance
|
|
93
|
+
) => (formattedValue: string, value: any) => { text: string; style?: any; className?: string }[]);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
export class Axis extends BoundedObject {}
|
package/src/charts/axis/Axis.js
CHANGED
|
@@ -40,7 +40,7 @@ export class Axis extends BoundedObject {
|
|
|
40
40
|
tickStyle: undefined,
|
|
41
41
|
tickClass: undefined,
|
|
42
42
|
},
|
|
43
|
-
...arguments
|
|
43
|
+
...arguments,
|
|
44
44
|
);
|
|
45
45
|
}
|
|
46
46
|
|
|
@@ -54,6 +54,8 @@ export class Axis extends BoundedObject {
|
|
|
54
54
|
return instance.calculator;
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
+
reportData(context, instance) {}
|
|
58
|
+
|
|
57
59
|
renderTicksAndLabels(context, instance, valueFormatter) {
|
|
58
60
|
if (this.hidden) return false;
|
|
59
61
|
|
|
@@ -141,7 +143,7 @@ export class Axis extends BoundedObject {
|
|
|
141
143
|
transform={transform}
|
|
142
144
|
>
|
|
143
145
|
{this.renderLabels(lines, x, this.labelDy, this.labelDx, offsetClass)}
|
|
144
|
-
</text
|
|
146
|
+
</text>,
|
|
145
147
|
);
|
|
146
148
|
});
|
|
147
149
|
});
|
|
@@ -189,7 +191,7 @@ export class Axis extends BoundedObject {
|
|
|
189
191
|
result.push(
|
|
190
192
|
<tspan key={-2} className={offsetClass} dy={dy}>
|
|
191
193
|
_
|
|
192
|
-
</tspan
|
|
194
|
+
</tspan>,
|
|
193
195
|
);
|
|
194
196
|
}
|
|
195
197
|
|
|
@@ -204,7 +206,7 @@ export class Axis extends BoundedObject {
|
|
|
204
206
|
dx={dx}
|
|
205
207
|
>
|
|
206
208
|
{p.text}
|
|
207
|
-
</tspan
|
|
209
|
+
</tspan>,
|
|
208
210
|
);
|
|
209
211
|
});
|
|
210
212
|
return result;
|
|
@@ -1,22 +1,24 @@
|
|
|
1
|
-
import * as Cx from
|
|
2
|
-
import {AxisProps} from
|
|
3
|
-
|
|
4
|
-
interface CategoryAxisProps extends AxisProps {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
1
|
+
import * as Cx from "../../core";
|
|
2
|
+
import { AxisProps } from "./Axis";
|
|
3
|
+
|
|
4
|
+
interface CategoryAxisProps extends AxisProps {
|
|
5
|
+
/** Uniform axes provide exact size and offset for all entries, while non-uniform axes adapt their size and offset to the number of entries under each category. */
|
|
6
|
+
uniform?: Cx.BooleanProp;
|
|
7
|
+
|
|
8
|
+
/** Names corresponding the given `values`. For example, `values` may be 0 .. 11 and `names` could be Jan .. Dec. */
|
|
9
|
+
names?: Cx.Prop<any[] | Cx.Config>;
|
|
10
|
+
|
|
11
|
+
/** Values used to initialize the axis. If an object is provided, keys are used for values and values are used for names. */
|
|
12
|
+
values?: Cx.Prop<any[] | Cx.Config>;
|
|
13
|
+
|
|
14
|
+
/** Sometimes, there is not enough data and each category takes a lot of space. `minSize` can be used to add fake entries up to the specified number, so everything looks normal. */
|
|
15
|
+
minSize?: Cx.NumberProp;
|
|
16
|
+
|
|
17
|
+
/** Base CSS class to be applied to the element. Defaults to `categoryaxis`. */
|
|
18
|
+
baseClass?: string;
|
|
19
|
+
|
|
20
|
+
/** Output value that can be used to calculate chart dimensions based on discovered category values. */
|
|
21
|
+
categoryCount?: Binding | Cx.AccessorChain<number> | Cx.GetSet<number>;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export class CategoryAxis extends Cx.Widget<CategoryAxisProps> {}
|