@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.)
hq.recaptime.dev/wiki/Phorge
phorge
phabricator
Provide chart function labels over the wire instead of making them up
Summary: Ref T13279. Makes charts incrementally more useful by allowing the server to provide labels and colors for functions.
Test Plan: {F6438872}
Reviewers: amckinley
Reviewed By: amckinley
Subscribers: yelirekim
Maniphest Tasks: T13279
Differential Revision: https://secure.phabricator.com/D20501
+149
-20
+12
-9
resources/celerity/map.php
+12
-9
resources/celerity/map.php
···
389
389
'rsrc/js/application/diffusion/behavior-pull-lastmodified.js' => 'c715c123',
390
390
'rsrc/js/application/doorkeeper/behavior-doorkeeper-tag.js' => '6a85bc5a',
391
391
'rsrc/js/application/drydock/drydock-live-operation-status.js' => '47a0728b',
392
-
'rsrc/js/application/fact/Chart.js' => 'b88a227d',
393
-
'rsrc/js/application/fact/ChartCurtainView.js' => 'd10a3c25',
392
+
'rsrc/js/application/fact/Chart.js' => 'eec96de0',
393
+
'rsrc/js/application/fact/ChartCurtainView.js' => '86954222',
394
+
'rsrc/js/application/fact/ChartFunctionLabel.js' => '81de1dab',
394
395
'rsrc/js/application/files/behavior-document-engine.js' => '243d6c22',
395
396
'rsrc/js/application/files/behavior-icon-composer.js' => '38a6cedb',
396
397
'rsrc/js/application/files/behavior-launch-icon-composer.js' => 'a17b84f1',
···
697
698
'javelin-behavior-user-menu' => '60cd9241',
698
699
'javelin-behavior-view-placeholder' => 'a9942052',
699
700
'javelin-behavior-workflow' => '9623adc1',
700
-
'javelin-chart' => 'b88a227d',
701
-
'javelin-chart-curtain-view' => 'd10a3c25',
701
+
'javelin-chart' => 'eec96de0',
702
+
'javelin-chart-curtain-view' => '86954222',
703
+
'javelin-chart-function-label' => '81de1dab',
702
704
'javelin-color' => '78f811c9',
703
705
'javelin-cookie' => '05d290ef',
704
706
'javelin-diffusion-locate-file-source' => '94243d89',
···
1933
1935
'javelin-dom',
1934
1936
'phabricator-draggable-list',
1935
1937
),
1936
-
'b88a227d' => array(
1937
-
'phui-chart-css',
1938
-
'd3',
1939
-
'javelin-chart-curtain-view',
1940
-
),
1941
1938
'b9109f8f' => array(
1942
1939
'javelin-behavior',
1943
1940
'javelin-uri',
···
2127
2124
'javelin-behavior',
2128
2125
'phabricator-keyboard-shortcut',
2129
2126
'javelin-stratcom',
2127
+
),
2128
+
'eec96de0' => array(
2129
+
'phui-chart-css',
2130
+
'd3',
2131
+
'javelin-chart-curtain-view',
2132
+
'javelin-chart-function-label',
2130
2133
),
2131
2134
'ef836bf2' => array(
2132
2135
'javelin-behavior',
+2
src/__phutil_library_map__.php
+2
src/__phutil_library_map__.php
···
2668
2668
'PhabricatorChartFunction' => 'applications/fact/chart/PhabricatorChartFunction.php',
2669
2669
'PhabricatorChartFunctionArgument' => 'applications/fact/chart/PhabricatorChartFunctionArgument.php',
2670
2670
'PhabricatorChartFunctionArgumentParser' => 'applications/fact/chart/PhabricatorChartFunctionArgumentParser.php',
2671
+
'PhabricatorChartFunctionLabel' => 'applications/fact/chart/PhabricatorChartFunctionLabel.php',
2671
2672
'PhabricatorChartRenderingEngine' => 'applications/fact/engine/PhabricatorChartRenderingEngine.php',
2672
2673
'PhabricatorChartStackedAreaDataset' => 'applications/fact/chart/PhabricatorChartStackedAreaDataset.php',
2673
2674
'PhabricatorChatLogApplication' => 'applications/chatlog/application/PhabricatorChatLogApplication.php',
···
8683
8684
'PhabricatorChartFunction' => 'Phobject',
8684
8685
'PhabricatorChartFunctionArgument' => 'Phobject',
8685
8686
'PhabricatorChartFunctionArgumentParser' => 'Phobject',
8687
+
'PhabricatorChartFunctionLabel' => 'Phobject',
8686
8688
'PhabricatorChartRenderingEngine' => 'Phobject',
8687
8689
'PhabricatorChartStackedAreaDataset' => 'PhabricatorChartDataset',
8688
8690
'PhabricatorChatLogApplication' => 'PhabricatorApplication',
+17
src/applications/fact/chart/PhabricatorChartFunction.php
+17
src/applications/fact/chart/PhabricatorChartFunction.php
···
4
4
extends Phobject {
5
5
6
6
private $argumentParser;
7
+
private $functionLabel;
7
8
8
9
final public function getFunctionKey() {
9
10
return $this->getPhobjectClassConstant('FUNCTIONKEY', 32);
···
41
42
$parser->parseArguments();
42
43
43
44
return $this;
45
+
}
46
+
47
+
public function setFunctionLabel(PhabricatorChartFunctionLabel $label) {
48
+
$this->functionLabel = $label;
49
+
return $this;
50
+
}
51
+
52
+
public function getFunctionLabel() {
53
+
if (!$this->functionLabel) {
54
+
$this->functionLabel = id(new PhabricatorChartFunctionLabel())
55
+
->setName(pht('Unlabeled Function'))
56
+
->setColor('rgba(255, 0, 0, 1)')
57
+
->setFillColor('rgba(255, 0, 0, 0.15)');
58
+
}
59
+
60
+
return $this->functionLabel;
44
61
}
45
62
46
63
final public static function newFromDictionary(array $map) {
+56
src/applications/fact/chart/PhabricatorChartFunctionLabel.php
+56
src/applications/fact/chart/PhabricatorChartFunctionLabel.php
···
1
+
<?php
2
+
3
+
final class PhabricatorChartFunctionLabel
4
+
extends Phobject {
5
+
6
+
private $name;
7
+
private $color;
8
+
private $icon;
9
+
private $fillColor;
10
+
11
+
public function setName($name) {
12
+
$this->name = $name;
13
+
return $this;
14
+
}
15
+
16
+
public function getName() {
17
+
return $this->name;
18
+
}
19
+
20
+
public function setColor($color) {
21
+
$this->color = $color;
22
+
return $this;
23
+
}
24
+
25
+
public function getColor() {
26
+
return $this->color;
27
+
}
28
+
29
+
public function setIcon($icon) {
30
+
$this->icon = $icon;
31
+
return $this;
32
+
}
33
+
34
+
public function getIcon() {
35
+
return $this->icon;
36
+
}
37
+
38
+
public function setFillColor($fill_color) {
39
+
$this->fillColor = $fill_color;
40
+
return $this;
41
+
}
42
+
43
+
public function getFillColor() {
44
+
return $this->fillColor;
45
+
}
46
+
47
+
public function toWireFormat() {
48
+
return array(
49
+
'name' => $this->getName(),
50
+
'color' => $this->getColor(),
51
+
'icon' => $this->getIcon(),
52
+
'fillColor' => $this->getFillColor(),
53
+
);
54
+
}
55
+
56
+
}
+10
-5
src/applications/fact/chart/PhabricatorChartStackedAreaDataset.php
+10
-5
src/applications/fact/chart/PhabricatorChartStackedAreaDataset.php
···
131
131
$events[] = $event_list;
132
132
}
133
133
134
+
$wire_labels = array();
135
+
foreach ($functions as $function_key => $function) {
136
+
$label = $function->getFunctionLabel();
137
+
138
+
$label->setName(pht('Important Data %s', $function_key));
139
+
140
+
$wire_labels[] = $label->toWireFormat();
141
+
}
142
+
134
143
$result = array(
135
144
'type' => $this->getDatasetTypeKey(),
136
145
'data' => $series,
137
146
'events' => $events,
138
-
'color' => array(
139
-
'blue',
140
-
'cyan',
141
-
'green',
142
-
),
147
+
'labels' => $wire_labels,
143
148
);
144
149
145
150
return $result;
+10
-3
webroot/rsrc/js/application/fact/Chart.js
+10
-3
webroot/rsrc/js/application/fact/Chart.js
···
3
3
* @requires phui-chart-css
4
4
* d3
5
5
* javelin-chart-curtain-view
6
+
* javelin-chart-function-label
6
7
*/
7
8
JX.install('Chart', {
8
9
···
144
145
.y(function(d) { return y(d.y1); });
145
146
146
147
for (var ii = 0; ii < dataset.data.length; ii++) {
148
+
var label = new JX.ChartFunctionLabel(dataset.labels[ii]);
149
+
150
+
var fill_color = label.getFillColor() || label.getColor();
151
+
147
152
g.append('path')
148
-
.style('fill', dataset.color[ii % dataset.color.length])
149
-
.style('opacity', '0.15')
153
+
.style('fill', fill_color)
150
154
.attr('d', area(dataset.data[ii]));
151
155
156
+
var stroke_color = label.getColor();
157
+
152
158
g.append('path')
153
159
.attr('class', 'line')
160
+
.style('stroke', stroke_color)
154
161
.attr('d', line(dataset.data[ii]));
155
162
156
163
g.selectAll('dot')
···
181
188
div.style('opacity', 0);
182
189
});
183
190
184
-
curtain.addFunctionLabel('Important Data');
191
+
curtain.addFunctionLabel(label);
185
192
}
186
193
},
187
194
+7
-3
webroot/rsrc/js/application/fact/ChartCurtainView.js
+7
-3
webroot/rsrc/js/application/fact/ChartCurtainView.js
···
64
64
return this._labelsNode;
65
65
},
66
66
67
-
_newFunctionLabelItem: function(item) {
67
+
_newFunctionLabelItem: function(label) {
68
68
var item_attrs = {
69
69
className: 'chart-function-label-list-item'
70
70
};
71
71
72
72
var icon = new JX.PHUIXIconView()
73
-
.setIcon('fa-circle');
73
+
.setIcon(label.getIcon());
74
+
75
+
// Charts may use custom colors, so we can't rely on the CSS classes
76
+
// which only provide standard colors like "red" and "blue".
77
+
icon.getNode().style.color = label.getColor();
74
78
75
79
var content = [
76
80
icon.getNode(),
77
-
item
81
+
label.getName()
78
82
];
79
83
80
84
return JX.$N('li', item_attrs, content);
+35
webroot/rsrc/js/application/fact/ChartFunctionLabel.js
+35
webroot/rsrc/js/application/fact/ChartFunctionLabel.js
···
1
+
/**
2
+
* @provides javelin-chart-function-label
3
+
*/
4
+
JX.install('ChartFunctionLabel', {
5
+
6
+
construct: function(spec) {
7
+
this._name = spec.name;
8
+
this._color = spec.color;
9
+
this._icon = spec.icon;
10
+
this._fillColor = spec.fillColor;
11
+
},
12
+
13
+
members: {
14
+
_name: null,
15
+
_color: null,
16
+
_icon: null,
17
+
_fillColor: null,
18
+
19
+
getColor: function() {
20
+
return this._color;
21
+
},
22
+
23
+
getName: function() {
24
+
return this._name;
25
+
},
26
+
27
+
getIcon: function() {
28
+
return this._icon || 'fa-circle';
29
+
},
30
+
31
+
getFillColor: function() {
32
+
return this._fillColor;
33
+
}
34
+
}
35
+
});