1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
// Selected set of PF chart colors to optimize for full-spectrum and colorblindness
// using unique part of PF name and a hex color fallback
$plotColors: (
"blue--300" #06c,
"green--100" #bde2b9,
"teal--200" #73c5c5,
"purple--100" #b2b0ea,
"gold--300" #f4c145,
"orange--300" #ec7a08,
"red-orange--200" #a30000,
"teal--300" #009596,
"black--500" #4d5258
);
.ct-plot {
font-family: var(--pf-t--global--font--family--body);
&-border {
stroke: var(--pf-t--chart--global--fill--color--300);
fill: transparent;
shape-rendering: crispedges;
}
&-title {
font-size: calc(var(--pf-t--chart--global--FontSize--sm) * 1px);
}
// Placeholder string to stretch the column, set offscreen
&-widest {
fill: transparent;
}
&-axis,
&-unit {
font-size: calc(var(--pf-t--chart--global--FontSize--xs) * 1px);
fill: var(--pf-t--chart--global--fill--color--700);
letter-spacing: var(--pf-t--chart--global--letter-spacing);
}
.pf-v6-theme-dark &-axis,
.pf-v6-theme-dark &-unit {
fill: var(--pf-t--chart--global--fill--color--400);
}
&-lines,
&-ticks {
stroke: var(--pf-t--chart--global--fill--color--300);
shape-rendering: crispedges;
}
&-selection {
fill: tan;
stroke: black;
opacity: 0.5;
shape-rendering: crispedges;
}
&-paths {
stroke-width: var(--pf-t--chart--global--stroke--width--xs);
shape-rendering: geometricprecision;
> path {
fill: var(--ct-plot-path-color);
stroke: var(--ct-plot-path-color);
}
}
}
.ct-plot-title {
fill: var(--pf-t--global--text--color--regular);
}
$plotColorCurrent: 0;
$plotColorTotal: 0;
// Count up total number of plot colors
@each $plotColor in $plotColors { $plotColorTotal: $plotColorTotal + 1; }
// Iterate through colors and set each graph area to a color
@each $plotColor, $plotColorBackup in $plotColors {
$plotColorCurrent: $plotColorCurrent + 1;
.ct-plot-paths > path:nth-last-child(#{$plotColorTotal}n + #{$plotColorCurrent}) {
--ct-plot-path-color: var(--pf-t--chart--color--#{$plotColor}, #{$plotColorBackup});
}
}
// Make plot colors available to the entire page
:root {
--ct-plot-color-total: #{$plotColorTotal};
@for $i from 1 through $plotColorTotal {
--ct-plot-color-#{i}: #{$plotColors[$i]};
}
}
[dir="rtl"] {
// Mirror the entire graph (placement & animation)
.ct-plot {
transform: scaleX(-1);
// Flip the text back (so it's not a mirror image)
text {
transform: scaleX(-1);
transform-origin: 50%;
transform-box: fill-box;
}
// Set the anchor point for y-axis and units
.ct-plot-axis-y text,
.ct-plot-unit {
transform-origin: 0%;
}
// Set the anchor point for the title
.ct-plot-title {
transform-origin: 100%;
}
}
}
|
