# Tank Examples and Reference

### Default Tank

An example of a default tank without any extra properties.

    using Dash
    using DashDaq

    external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

    app = dash(external_stylesheets=external_stylesheets)

    app.layout =  html_div([
      daq_tank(
          id="my-tank",
          value=5,
          min=0,
          max=10,
          style=Dict("margin-left" => "50px")
      ),
      dcc_slider(
          id="tank-slider",
          value=5,
          min=0,
          max=10,
      ),
    ])

    callback!(app,
      Output("my-tank", "value"),
      [Input("tank-slider", "value")]) do value
      return value
    end

    run_server(app, "0.0.0.0", debug=true)

0
2
4
6
8
10
0 2 4 6 8 10

### Current value with units

Display the current value, along with optional units with the `units` and `showCurrentValue` properties.

    using Dash
    using DashDaq

    app = dash()

    app.layout = daq_tank(
      value=6,
      showCurrentValue=true,
      units="gallons",
      style=Dict("margin-left" => "50px")
    )

    run_server(app, "0.0.0.0", debug=true)

0
2
4
6
8
10
6
gallons

### Height and width

Control the size of the tank by setting `height` and `width`.

    using Dash
    using DashDaq

    app = dash()

    app.layout = daq_tank(
      height=75,
      width=200,
      value=6,
      style=Dict("margin-left" => "50px")
    )

    run_server(app, "0.0.0.0", debug=true)

0
2
4
6
8
10

### Label

Display a label alongside your tank in the specified position with `label` and `labelPosition`.

    using Dash
    using DashDaq

    app = dash()

    app.layout = daq_tank(
      value=3,
      label="Tank label",
      labelPosition="bottom"
    )

    run_server(app, "0.0.0.0", debug=true)

0
2
4
6
8
10
Tank label

### Custom scales

Control the intervals at which labels are displayed, as well as the labels themselves with the `scale` property.

    using Dash
    using DashDaq

    app = dash()

    app.layout = daq_tank(
      value=3,
      scale=Dict("interval" => 2, "labelInterval" => 2,
              "custom" => Dict("5" => "Set point")),
      style=Dict("margin-left" => "50px")
    )

    run_server(app, "0.0.0.0", debug=true)

0
4
Set point
8
10

### Logarithmic

Use a logarithmic scale for the tank with the specified base by setting `logarithmic=true`.

    using Dash
    using DashDaq

    app = dash()

    app.layout = daq_tank(
      min=0,
      max=10,
      value=300,
      logarithmic=true,
      base=3,
      style=Dict("margin-left" => "50px")
    )

    run_server(app, "0.0.0.0", debug=true)

30
32
34
36
38
310

## Tank Properties

> Our recommended IDE for writing Dash apps is Dash Enterprise's Data Science Workspaces, which has typeahead support for Dash Component Properties. Find out if your company is using Dash Enterprise.

`id` (String; optional): The ID used to identify this component in Dash callbacks.

`value` (Real; optional): The value of tank. If logarithmic, the displayed value will be the logarithm of the inputted value.

`height` (Real; default `192`): The height of the tank in pixels.

`width` (Real; default `112`): The width of the tank in pixels.

`color` (String; optional): The color of tank fill.

`theme` (Dict; default `light`): Theme configuration to be set by a ThemeProvider.

`currentValueStyle` (Dict; optional): text style of current value.

`min` (Real; default `0`): The minimum value of the tank. If logarithmic, represents minimum exponent.

`max` (Real; default `10`): The maximum value of the tank. If logarithmic, represents the maximum exponent.

`base` (Real; default `10`): Base to be used in logarithmic scale.

`logarithmic` (Bool; optional): If set to true, a logarithmic scale will be used.

`showCurrentValue` (Bool; optional): If true, the current value of the tank will be displayed.

`units` (String; optional): Label for the current value.

`label` (Dict; optional): Description to be displayed alongside the control. To control styling, pass an object with label and style properties.

`label` is a String | Dict with keys:

- `label` (String; optional)

- `style` (Dict; optional)

`labelPosition` (a value equal to: 'top' or 'bottom'; default `'top'`): Where the component label is positioned.

`scale` (Dict; optional): Configuration for the component scale.

`scale` is a Dict with keys:

- `custom` (Dict; optional): Custom scale marks. The key determines the position and the value determines what will show. If you want to set the style of a specific mark point, the value should be an object which contains style and label properties.

  `custom` is a Real | Dict with keys:

  - `label` (String; optional)

  - `style` (String; optional)

- `interval` (Real; optional): Interval by which the scale goes up. Attempts to dynamically divide min-max range by default.

- `labelInterval` (Real; optional): Interval by which labels are added to scale marks. Defaults to 2 (every other mark has a label).

- `start` (Real; optional): Value to start the scale from. Defaults to min.

`className` (String; optional): Class to apply to the root component element.

`style` (Dict; optional): Style to apply to the root component element.

`exceedMessage` (String; optional): Warning message when value exceed max.

`lagingMessage` (String; optional): Warning message when value is laging from min.

`textColor` (String; optional): text color.