diff --git a/resources/celerity/map.php b/resources/celerity/map.php
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@@ -389,8 +389,9 @@
'rsrc/js/application/diffusion/behavior-pull-lastmodified.js' => 'c715c123',
'rsrc/js/application/doorkeeper/behavior-doorkeeper-tag.js' => '6a85bc5a',
'rsrc/js/application/drydock/drydock-live-operation-status.js' => '47a0728b',
- 'rsrc/js/application/fact/Chart.js' => 'b88a227d',
- 'rsrc/js/application/fact/ChartCurtainView.js' => 'd10a3c25',
+ 'rsrc/js/application/fact/Chart.js' => 'eec96de0',
+ 'rsrc/js/application/fact/ChartCurtainView.js' => '86954222',
+ 'rsrc/js/application/fact/ChartFunctionLabel.js' => '81de1dab',
'rsrc/js/application/files/behavior-document-engine.js' => '243d6c22',
'rsrc/js/application/files/behavior-icon-composer.js' => '38a6cedb',
'rsrc/js/application/files/behavior-launch-icon-composer.js' => 'a17b84f1',
@@ -697,8 +698,9 @@
'javelin-behavior-user-menu' => '60cd9241',
'javelin-behavior-view-placeholder' => 'a9942052',
'javelin-behavior-workflow' => '9623adc1',
- 'javelin-chart' => 'b88a227d',
- 'javelin-chart-curtain-view' => 'd10a3c25',
+ 'javelin-chart' => 'eec96de0',
+ 'javelin-chart-curtain-view' => '86954222',
+ 'javelin-chart-function-label' => '81de1dab',
'javelin-color' => '78f811c9',
'javelin-cookie' => '05d290ef',
'javelin-diffusion-locate-file-source' => '94243d89',
@@ -1933,11 +1935,6 @@
'javelin-dom',
'phabricator-draggable-list',
),
- 'b88a227d' => array(
- 'phui-chart-css',
- 'd3',
- 'javelin-chart-curtain-view',
- ),
'b9109f8f' => array(
'javelin-behavior',
'javelin-uri',
@@ -2128,6 +2125,12 @@
'phabricator-keyboard-shortcut',
'javelin-stratcom',
),
+ 'eec96de0' => array(
+ 'phui-chart-css',
+ 'd3',
+ 'javelin-chart-curtain-view',
+ 'javelin-chart-function-label',
+ ),
'ef836bf2' => array(
'javelin-behavior',
'javelin-dom',
diff --git a/src/__phutil_library_map__.php b/src/__phutil_library_map__.php
--- a/src/__phutil_library_map__.php
+++ b/src/__phutil_library_map__.php
@@ -2658,6 +2658,7 @@
'PhabricatorChartFunction' => 'applications/fact/chart/PhabricatorChartFunction.php',
'PhabricatorChartFunctionArgument' => 'applications/fact/chart/PhabricatorChartFunctionArgument.php',
'PhabricatorChartFunctionArgumentParser' => 'applications/fact/chart/PhabricatorChartFunctionArgumentParser.php',
+ 'PhabricatorChartFunctionLabel' => 'applications/fact/chart/PhabricatorChartFunctionLabel.php',
'PhabricatorChartRenderingEngine' => 'applications/fact/engine/PhabricatorChartRenderingEngine.php',
'PhabricatorChartStackedAreaDataset' => 'applications/fact/chart/PhabricatorChartStackedAreaDataset.php',
'PhabricatorChatLogApplication' => 'applications/chatlog/application/PhabricatorChatLogApplication.php',
@@ -8654,6 +8655,7 @@
'PhabricatorChartFunction' => 'Phobject',
'PhabricatorChartFunctionArgument' => 'Phobject',
'PhabricatorChartFunctionArgumentParser' => 'Phobject',
+ 'PhabricatorChartFunctionLabel' => 'Phobject',
'PhabricatorChartRenderingEngine' => 'Phobject',
'PhabricatorChartStackedAreaDataset' => 'PhabricatorChartDataset',
'PhabricatorChatLogApplication' => 'PhabricatorApplication',
diff --git a/src/applications/fact/chart/PhabricatorChartFunction.php b/src/applications/fact/chart/PhabricatorChartFunction.php
--- a/src/applications/fact/chart/PhabricatorChartFunction.php
+++ b/src/applications/fact/chart/PhabricatorChartFunction.php
@@ -4,6 +4,7 @@
extends Phobject {
private $argumentParser;
+ private $functionLabel;
final public function getFunctionKey() {
return $this->getPhobjectClassConstant('FUNCTIONKEY', 32);
@@ -43,6 +44,22 @@
return $this;
}
+ public function setFunctionLabel(PhabricatorChartFunctionLabel $label) {
+ $this->functionLabel = $label;
+ return $this;
+ }
+
+ public function getFunctionLabel() {
+ if (!$this->functionLabel) {
+ $this->functionLabel = id(new PhabricatorChartFunctionLabel())
+ ->setName(pht('Unlabeled Function'))
+ ->setColor('rgba(255, 0, 0, 1)')
+ ->setFillColor('rgba(255, 0, 0, 0.15)');
+ }
+
+ return $this->functionLabel;
+ }
+
final public static function newFromDictionary(array $map) {
PhutilTypeSpec::checkMap(
$map,
diff --git a/src/applications/fact/chart/PhabricatorChartFunctionLabel.php b/src/applications/fact/chart/PhabricatorChartFunctionLabel.php
new file mode 100644
--- /dev/null
+++ b/src/applications/fact/chart/PhabricatorChartFunctionLabel.php
@@ -0,0 +1,56 @@
+<?php
+
+final class PhabricatorChartFunctionLabel
+ extends Phobject {
+
+ private $name;
+ private $color;
+ private $icon;
+ private $fillColor;
+
+ public function setName($name) {
+ $this->name = $name;
+ return $this;
+ }
+
+ public function getName() {
+ return $this->name;
+ }
+
+ public function setColor($color) {
+ $this->color = $color;
+ return $this;
+ }
+
+ public function getColor() {
+ return $this->color;
+ }
+
+ public function setIcon($icon) {
+ $this->icon = $icon;
+ return $this;
+ }
+
+ public function getIcon() {
+ return $this->icon;
+ }
+
+ public function setFillColor($fill_color) {
+ $this->fillColor = $fill_color;
+ return $this;
+ }
+
+ public function getFillColor() {
+ return $this->fillColor;
+ }
+
+ public function toWireFormat() {
+ return array(
+ 'name' => $this->getName(),
+ 'color' => $this->getColor(),
+ 'icon' => $this->getIcon(),
+ 'fillColor' => $this->getFillColor(),
+ );
+ }
+
+}
diff --git a/src/applications/fact/chart/PhabricatorChartStackedAreaDataset.php b/src/applications/fact/chart/PhabricatorChartStackedAreaDataset.php
--- a/src/applications/fact/chart/PhabricatorChartStackedAreaDataset.php
+++ b/src/applications/fact/chart/PhabricatorChartStackedAreaDataset.php
@@ -131,15 +131,20 @@
$events[] = $event_list;
}
+ $wire_labels = array();
+ foreach ($functions as $function_key => $function) {
+ $label = $function->getFunctionLabel();
+
+ $label->setName(pht('Important Data %s', $function_key));
+
+ $wire_labels[] = $label->toWireFormat();
+ }
+
$result = array(
'type' => $this->getDatasetTypeKey(),
'data' => $series,
'events' => $events,
- 'color' => array(
- 'blue',
- 'cyan',
- 'green',
- ),
+ 'labels' => $wire_labels,
);
return $result;
diff --git a/webroot/rsrc/js/application/fact/Chart.js b/webroot/rsrc/js/application/fact/Chart.js
--- a/webroot/rsrc/js/application/fact/Chart.js
+++ b/webroot/rsrc/js/application/fact/Chart.js
@@ -3,6 +3,7 @@
* @requires phui-chart-css
* d3
* javelin-chart-curtain-view
+ * javelin-chart-function-label
*/
JX.install('Chart', {
@@ -144,13 +145,19 @@
.y(function(d) { return y(d.y1); });
for (var ii = 0; ii < dataset.data.length; ii++) {
+ var label = new JX.ChartFunctionLabel(dataset.labels[ii]);
+
+ var fill_color = label.getFillColor() || label.getColor();
+
g.append('path')
- .style('fill', dataset.color[ii % dataset.color.length])
- .style('opacity', '0.15')
+ .style('fill', fill_color)
.attr('d', area(dataset.data[ii]));
+ var stroke_color = label.getColor();
+
g.append('path')
.attr('class', 'line')
+ .style('stroke', stroke_color)
.attr('d', line(dataset.data[ii]));
g.selectAll('dot')
@@ -181,7 +188,7 @@
div.style('opacity', 0);
});
- curtain.addFunctionLabel('Important Data');
+ curtain.addFunctionLabel(label);
}
},
diff --git a/webroot/rsrc/js/application/fact/ChartCurtainView.js b/webroot/rsrc/js/application/fact/ChartCurtainView.js
--- a/webroot/rsrc/js/application/fact/ChartCurtainView.js
+++ b/webroot/rsrc/js/application/fact/ChartCurtainView.js
@@ -64,17 +64,21 @@
return this._labelsNode;
},
- _newFunctionLabelItem: function(item) {
+ _newFunctionLabelItem: function(label) {
var item_attrs = {
className: 'chart-function-label-list-item'
};
var icon = new JX.PHUIXIconView()
- .setIcon('fa-circle');
+ .setIcon(label.getIcon());
+
+ // Charts may use custom colors, so we can't rely on the CSS classes
+ // which only provide standard colors like "red" and "blue".
+ icon.getNode().style.color = label.getColor();
var content = [
icon.getNode(),
- item
+ label.getName()
];
return JX.$N('li', item_attrs, content);
diff --git a/webroot/rsrc/js/application/fact/ChartFunctionLabel.js b/webroot/rsrc/js/application/fact/ChartFunctionLabel.js
new file mode 100644
--- /dev/null
+++ b/webroot/rsrc/js/application/fact/ChartFunctionLabel.js
@@ -0,0 +1,35 @@
+/**
+ * @provides javelin-chart-function-label
+ */
+JX.install('ChartFunctionLabel', {
+
+ construct: function(spec) {
+ this._name = spec.name;
+ this._color = spec.color;
+ this._icon = spec.icon;
+ this._fillColor = spec.fillColor;
+ },
+
+ members: {
+ _name: null,
+ _color: null,
+ _icon: null,
+ _fillColor: null,
+
+ getColor: function() {
+ return this._color;
+ },
+
+ getName: function() {
+ return this._name;
+ },
+
+ getIcon: function() {
+ return this._icon || 'fa-circle';
+ },
+
+ getFillColor: function() {
+ return this._fillColor;
+ }
+ }
+});