feat(#157): global sort_by, sort_dir options

MindFreeze · Mar 1, 2024 · f09811c · f09811c
1 parent a86e7a4
commit f09811c
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -42,15 +42,17 @@ This card is intended to display connections between entities with numeric state
 | gas_co2_intensity | number  | **Optional** | 66.6 g/ft³ or 2352 g/m³ | Carbon intensity of gas, e.g. in gCO2eq/ft³. Default value depends on locale; units must match those of gas entities.
 | electricity_price | number  | **Optional** |                     | Unit price of electricity, e.g. in USD/kWh. Automatic conversion does not support varying electricity prices like the Energy Dashboard does.
 | gas_price         | number  | **Optional** |                     | Unit price of gas, e.g. in USD/ft³.
-| monetary_unit     | string  | **Optional** |                     | Currency of the gas or electricity price, e.g. 'USD'.
+| monetary_unit     | string  | **Optional** |                     | Currency of the gas or electricity price, e.g. 'USD'
+| sort_by           | string  | **Optional** |                     | Sort the entities. Valid options are: 'state'. If your values change often, you may want to use the `throttle` option to limit update frequency
+| sort_dir          | string  | **Optional** | desc                | Sorting direction. Valid options are: 'asc' for smallest first & 'desc' for biggest first
 
 ### Sections object
 
 | Name              | Type    | Requirement  | Default             | Description                                 |
 | ----------------- | ------- | ------------ | ------------------- | ------------------------------------------- |
 | entities          | list    | **Required** |                     | Entities to show in this section. Could be just the entity_id as a string or an object, see [entities object](#entities-object) for additional options. Note that the order of this list matters
-| sort_by           | string  | **Optional** |                     | Sort the entities in this section. Valid options are: 'state'. If your values change often, you may want to use the `throttle` option to limit update frequency
-| sort_dir          | string  | **Optional** | desc                | Sorting direction. Valid options are: 'asc' for smallest first & 'desc' for biggest first
+| sort_by           | string  | **Optional** |                     | Sort the entities in this section. Overrides the top level option
+| sort_dir          | string  | **Optional** | desc                | Sorting direction for this section. Overrides the top level option
 | sort_group_by_parent | boolean | **Optional** | false            | Group entities by parent before sorting. See #135
 | min_width         | string  | **Optional** |                     | Minimum section width. Any CSS value is OK. Examples: 75px, 50%, 1em
 

diff --git a/src/chart.ts b/src/chart.ts
@@ -306,8 +306,10 @@ export class Chart extends LitElement {
       // calc sizes to determine statePerPixelY ratio and find the best one
       const calcResults = this._calcBoxHeights(boxes, availableHeight, total);
       const parentBoxes = section.sort_group_by_parent ? sectionsStates[sectionsStates.length - 1]?.boxes || [] : [];
+      const sortBy = section.sort_by || this.config.sort_by;
+      const sortDir = section.sort_dir || this.config.sort_dir;
       sectionsStates.push({
-        boxes: sortBoxes(parentBoxes, calcResults.boxes, section.sort_by, section.sort_dir),
+        boxes: sortBoxes(parentBoxes, calcResults.boxes, sortBy, sortDir),
         total,
         statePerPixelY: calcResults.statePerPixelY,
         spacerH: 0,

diff --git a/src/types.ts b/src/types.ts
@@ -125,6 +125,8 @@ export interface SankeyChartConfig extends LovelaceCardConfig {
   throttle?: number;
   min_state?: number;
   static_scale?: number;
+  sort_by?: 'state';
+  sort_dir?: 'asc' | 'desc';
 }
 
 export interface Section {