Modifying Site-Wide Custom Styles

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

  1. In the Manage Custom Styles window, click the icon (pencil) next to the custom style you want to edit. In this case, we are editing the custom style DarkBlueTable.

    Manage Custom Styles interface, with 'New Custom Style' button, and a list of styles with one entry (DarkBlueTable) that shows 1 App with that style, active link to '15' (internal app number), edit icon (pencil)(active), and delete icon (trash can)
    Manage Custom Styles: Beginning to Edit a Custom Style
  2. 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";
              });
        }
    };
    Editing Custom Style interface (Custom Style: DarkBlueTable), with 'Save' button (active), 'ID' label 1, 'Name' textbox, 'CSS' tab, and 'Javascript' tab (active) that contains a checkbox 'Autocomplete on', and a line-numbered code editing window, with JS code
    Editing a Custom Style
  3. Note the resultant changes in the table visual.

    Table with columns 'year', 'state', and 'sum(population)'; last column has black horizontal bars to represent the size of the measurement; alternate rows have pale grey and deep blue background
    Table with Custom Style DarkBlueTableBar
  4. 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.

    Manage Custom Styles interface, with 'New Custom Style' button, and a list of styles with one entry (DarkBlueTableBar) that shows 1 App with that style, active link to '15' (internal app number), edit icon (pencil), and delete icon (trash can)
    Manage Custom Styles Shows an Edited and Renamed Custom Style