Modifying site-wide custom styles

To edit the existing site-wide custom styles, follow these steps.

In the Manage Custom Styles window, click the Pencil icon next to the custom style you want to edit.

In this case, we are editing the custom style DarkBlueTable.

Figure 1. Manage Custom Styles: Beginning to Edit a Custom Style

In the Custom Style: DarkBlueTable window, make necessary changes, and then click Save.

Note that you can also rename the style to DarkBlueTableBar.

Here, we clicked the Javascript tab, and added some code to convert the last aggregate column to a proportionally sized horizontal bar.

return {
            version: "1",
            
            afterDraw: function() {
            var d = arcapi.dataResult();
            var rows = d.rows();
            var aggColIndex = -1;
            d.columns().forEach(function(col) {
            if (col.colproperty() == 2) {
            aggColIndex = col.colindex();
            }
            })
            
            if (aggColIndex < 0) {
            return;
            }
            
            console.log(aggColIndex);
            var extent = d3.extent(rows, function(row) {
            return +row[aggColIndex];
            });
            
            var scale = d3.scale.linear()
            .domain(extent)
            .range([5, 80]);
            
            console.log(extent);
            d3.selectAll("#" + arcapi.chartId() + " .table tbody tr :nth-child(" + (aggColIndex + 1) + ")")
            .text("")
            .append("div")
            .style("background-color", "black")
            .style("height", "15px")
            .style("width", function(d, i) {
            var m = +rows[i][aggColIndex];
            var w = scale(m);
            return w + "px";
            });
            }
            };

Note the resultant changes in the table visual.

Figure 3. Table with Custom Style DarkBlueTableBar
Note also that because we changed the name of an existing custom style to DarkBlueTableBar, there is a corresponding update in the Manage Custom Styles window.

Figure 4. Manage Custom Styles Shows an Edited and Renamed Custom Style