@arcgis/core/widgets/smartMapping/ClassedColorSlider.d.ts

ArcGIS Maps SDK for JavaScript: A complete 2D and 3D mapping and data visualization API

import type ClassBreakInfo from "../../renderers/support/ClassBreakInfo.js";
import type SmartMappingSliderBase from "./SmartMappingSliderBase.js";
import type ClassedColorSliderViewModel from "./ClassedColorSlider/ClassedColorSliderViewModel.js";
import type { ClassBreaksRendererResult } from "../../smartMapping/renderers/color.js";
import type { HistogramResult } from "../../smartMapping/statistics/types.js";
import type { SmartMappingSliderBaseProperties } from "./SmartMappingSliderBase.js";
import type { ColorBreak } from "./types.js";
import type { ClassedColorSliderViewModelProperties } from "./ClassedColorSlider/ClassedColorSliderViewModel.js";

export interface ClassedColorSliderProperties extends SmartMappingSliderBaseProperties, Partial<Pick<ClassedColorSlider, "breaks">> {
  /**
   * The widget's default label. This label displays when it is
   * used within another widget, such as the [Expand](https://developers.arcgis.com/javascript/latest/references/core/widgets/Expand/)
   * or [LayerList](https://developers.arcgis.com/javascript/latest/references/core/widgets/LayerList/) widgets.
   *
   * @since 4.11
   */
  label?: string | null;
  /**
   * The view model for the ClassedColorSlider widget. This class contains all the logic
   * (properties and methods) that controls this widget's behavior. See the
   * [ClassedColorSliderViewModel](https://developers.arcgis.com/javascript/latest/references/core/widgets/smartMapping/ClassedColorSlider/ClassedColorSliderViewModel/)
   * class to access all properties and methods on the ClassedColorSlider widget.
   */
  viewModel?: ClassedColorSliderViewModelProperties;
}

/**
 * The ClassedColorSlider widget is designed for authoring and exploring data-driven visualizations in any
 * layer that can be rendered with color in a [ClassBreaksRenderer](https://developers.arcgis.com/javascript/latest/references/core/renderers/ClassBreaksRenderer/).
 * At a minimum you must set the [breaks](https://developers.arcgis.com/javascript/latest/references/core/widgets/smartMapping/ClassedColorSlider/#breaks) property
 * of the widget. The breaks are used to set the thumbs and render the color of each slider segment.
 *
 * <span id="image-annotations"></span>
 * See the image below for a summary of the configurable options available on this slider.
 *
 * ![ClassedColorSlider with annotations](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/classedcolorslider-labels.png "ClassedColorSlider with annotations")
 *
 * The [fromRendererResult()](https://developers.arcgis.com/javascript/latest/references/core/widgets/smartMapping/ClassedColorSlider/#fromRendererResult) method can be used to conveniently create this slider
 * from the result of the [createClassBreaksRenderer()](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/renderers/color/#createClassBreaksRenderer)
 * method.
 *
 * ```js
 * const params = {
 *   layer: layer,
 *   basemap: map.basemap,
 *   valueExpression: "( $feature.POP_POVERTY / $feature.TOTPOP_CY ) * 100",
 *   view: view,
 *   classificationMethod: "equal-interval"
 * };
 *
 * let rendererResult = null;
 *
 * colorRendererCreator
 *   .createClassBreaksRenderer(params)
 *   .then(function(response) {
 *     rendererResult = response;
 *     layer.renderer = response.renderer;
 *
 *     return histogram({
 *       layer: layer,
 *       valueExpression: params.valueExpression,
 *       view: view,
 *       numBins: 70
 *     });
 *   })
 *    .then(function(histogramResult) {
 *      const slider = ClassedColorSlider.fromRendererResult(rendererResult, histogramResult);
 *      slider.container = "slider";
 *    })
 *    .catch(function(error) {
 *      console.log("there was an error: ", error);
 *    });
 * ```
 *
 * This slider should be used to update the [classBreakInfos](https://developers.arcgis.com/javascript/latest/references/core/renderers/ClassBreaksRenderer/#classBreakInfos)
 * in a ClassBreaksRenderer. It is the responsibility of the app developer
 * to set up event listeners on this slider that update the breaks of the appropriate renderer.
 *
 * ```js
 * // when the user slides the handle(s), update the renderer
 * // with the updated class breaks
 *
 * slider.on(["thumb-change", "thumb-drag"], function() {
 *   const renderer = layer.renderer.clone();
 *   renderer.classBreakInfos = slider.updateClassBreakInfos( renderer.classBreakInfos );
 *   layer.renderer = renderer;
 * });
 * ```
 *
 * @deprecated since version 5.0. Use the [Slider Classed Color](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-classed-color-legacy/) component instead. For information on widget deprecation, read about [Esri's move to web components](https://developers.arcgis.com/javascript/latest/components-transition-plan/).
 * @since 4.12
 * @see [ClassedColorSliderViewModel](https://developers.arcgis.com/javascript/latest/references/core/widgets/smartMapping/ClassedColorSlider/ClassedColorSliderViewModel/)
 * @see [colorRendererCreator](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/renderers/color/)
 * @see [ClassBreaksRenderer](https://developers.arcgis.com/javascript/latest/references/core/renderers/ClassBreaksRenderer/)
 */
export default class ClassedColorSlider extends SmartMappingSliderBase {
  /**
   * A convenience function used to create a ClassedColorSlider widget from the result
   * of the [createClassBreaksRenderer()](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/renderers/color/#createClassBreaksRenderer) method.
   *
   * @param rendererResult - The result object from the [createClassBreaksRenderer()](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/renderers/color/#createClassBreaksRenderer)
   *   method.
   * @param histogramResult - The result histogram object from the [histogram()](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/statistics/histogram/#histogram)
   *   method.
   * @returns Returns a ClassedColorSlider instance. This will not render until you assign
   *   it a valid [container](https://developers.arcgis.com/javascript/latest/references/core/widgets/smartMapping/ClassedColorSlider/#container).
   * @example
   * const params = {
   *   layer: layer,
   *   basemap: map.basemap,
   *   valueExpression: "( $feature.POP_POVERTY / $feature.TOTPOP_CY ) * 100",
   *   view: view,
   *   classificationMethod: "equal-interval"
   * };
   *
   * let rendererResult = null;
   *
   * colorRendererCreator
   *   .createClassBreaksRenderer(params)
   *   .then(function(response) {
   *     rendererResult = response;
   *     layer.renderer = response.renderer;
   *
   *     return histogram({
   *       layer: layer,
   *       valueExpression: params.valueExpression,
   *       view: view,
   *       numBins: 70
   *     });
   *   })
   *    .then(function(histogramResult) {
   *      const slider = ClassedColorSlider.fromRendererResult(rendererResult, histogramResult);
   *      slider.container = "slider";
   *    })
   *    .catch(function(error) {
   *      console.log("there was an error: ", error);
   *    });
   */
  static fromRendererResult(rendererResult: ClassBreaksRendererResult, histogramResult?: HistogramResult): ClassedColorSlider;
  /**
   * @example
   * // Typical usage
   * const slider = new ClassedColorSlider({
   *   container: "sliderDiv",
   *   breaks: [{
   *     min: 0,
   *     max: 20,
   *     color: new Color([ 0, 0, 30 ])
   *   }, {
   *     min: 20,
   *     max: 40,
   *     color: new Color([ 0, 0, 100 ])
   *   }, {
   *     min: 40,
   *     max: 60,
   *     color: new Color([ 0, 0, 180 ])
   *   }, {
   *     min: 60,
   *     max: 80,
   *     color: new Color([ 0, 0, 255 ])
   *   }]
   * });
   */
  constructor(properties?: ClassedColorSliderProperties);
  /**
   * An array of class breaks with associated colors. The colors mapped to each break can
   * be used to update the renderer of a layer. A minimum of two breaks must be provided to the slider.
   *
   * @example
   * slider.breaks = [{
   *   min: 0,
   *   max: 20,
   *   color: new Color([ 0, 0, 30 ])
   * }, {
   *   min: 20,
   *   max: 40,
   *   color: new Color([ 0, 0, 100 ])
   * }, {
   *   min: 40,
   *   max: 60,
   *   color: new Color([ 0, 0, 180 ])
   * }, {
   *   min: 60,
   *   max: 80,
   *   color: new Color([ 0, 0, 255 ])
   * }];
   */
  accessor breaks: ColorBreak[];
  /**
   * The widget's default label. This label displays when it is
   * used within another widget, such as the [Expand](https://developers.arcgis.com/javascript/latest/references/core/widgets/Expand/)
   * or [LayerList](https://developers.arcgis.com/javascript/latest/references/core/widgets/LayerList/) widgets.
   *
   * @since 4.11
   */
  get label(): string;
  set label(value: string | null | undefined);
  /**
   * The view model for the ClassedColorSlider widget. This class contains all the logic
   * (properties and methods) that controls this widget's behavior. See the
   * [ClassedColorSliderViewModel](https://developers.arcgis.com/javascript/latest/references/core/widgets/smartMapping/ClassedColorSlider/ClassedColorSliderViewModel/)
   * class to access all properties and methods on the ClassedColorSlider widget.
   */
  get viewModel(): ClassedColorSliderViewModel;
  set viewModel(value: ClassedColorSliderViewModelProperties);
  /**
   * A convenience function used to update the
   * [ClassBreaksRenderer.classBreakInfos](https://developers.arcgis.com/javascript/latest/references/core/renderers/ClassBreaksRenderer/#classBreakInfos)
   * of a [ClassBreaksRenderer](https://developers.arcgis.com/javascript/latest/references/core/renderers/ClassBreaksRenderer/) associated with this slider.
   *
   * The number of breaks from the renderer must match the number of breaks in the slider.
   * Generally, the input breaks for this method should come from the same renderer as one
   * used to create the slider with the [fromRendererResult()](https://developers.arcgis.com/javascript/latest/references/core/widgets/smartMapping/ClassedColorSlider/#fromRendererResult) method.
   *
   * @param breakInfos - The classBreakInfos
   *   from a [ClassBreaksRenderer](https://developers.arcgis.com/javascript/latest/references/core/renderers/ClassBreaksRenderer/) instance to update based on
   *   the properties of the slider.
   * @returns The updated classBreakInfos to set
   *   on a ClassBreaksRenderer object.
   * @example
   * slider.on(["thumb-change", "thumb-drag"], function() {
   *   const renderer = layer.renderer.clone();
   *   renderer.classBreakInfos = slider.updateClassBreakInfos( renderer.classBreakInfos );
   *   layer.renderer = renderer;
   * });
   */
  updateClassBreakInfos(breakInfos: ClassBreakInfo[]): ClassBreakInfo[] | null | undefined;
  /**
   * A convenience function used to update the properties a ClassedColorSlider from the result
   * of the [createClassBreaksRenderer()](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/renderers/color/#createClassBreaksRenderer) method.
   *
   * @param rendererResult - The result object from the [createClassBreaksRenderer()](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/renderers/color/#createClassBreaksRenderer)
   *   method.
   * @param histogramResult - The result histogram object from the [histogram()](https://developers.arcgis.com/javascript/latest/references/core/smartMapping/statistics/histogram/#histogram)
   *   method.
   * @example
   * const params = {
   *   layer: layer,
   *   basemap: map.basemap,
   *   valueExpression: "( $feature.POP_POVERTY / $feature.TOTPOP_CY ) * 100",
   *   view: view,
   *   classificationMethod: "equal-interval"
   * };
   *
   * let rendererResult = null;
   *
   * colorRendererCreator
   *   .createClassBreaksRenderer(params)
   *   .then(function(response) {
   *     rendererResult = response;
   *     layer.renderer = response.renderer;
   *
   *     return histogram({
   *       layer: layer,
   *       valueExpression: params.valueExpression,
   *       view: view,
   *       numBins: 70
   *     });
   *   })
   *    .then(function(histogramResult) {
   *      const slider = ClassedColorSlider.fromRendererResult(rendererResult, histogramResult);
   *      slider.container = "slider";
   *    })
   *    .catch(function(error) {
   *      console.log("there was an error: ", error);
   *    });
   */
  updateFromRendererResult(rendererResult: ClassBreaksRendererResult, histogramResult?: HistogramResult): void;
}