solara-ui 1.45.0__py3-none-any.whl

solara/components/pivot_table.vue

@@ -0,0 +1,158 @@
+<template>
+  <div :style="`overflow: auto; ${style_}`">
+    <h4>{{d.agg}}</h4>
+      <div style="padding: 0px">
+      <table class="pivottable">
+        <tr v-for="(header, i) in d.headers_x">
+          <th v-for="axis in Math.max(0, d.y.length-1)"></th>
+          <th>{{d.x[i]}}</th>
+          <th v-for="(label, col) in header" @click="select({x: [i, col]})" :class="{'selected': isSelected2({x: [i, col]}), 'clickable': true}">
+            {{col == 0 ? header[col] : header[col] == header[col-1] ? '' : header[col]}}
+          </th>
+          <th v-if="i == d.headers_x.length - 1">Total </th>
+        </tr>
+        <tr>
+          <th v-for="axis in d.y"> {{axis}}</th>
+        </tr>
+        <tr v-for="row in rowIndex">
+          <th v-for="(header, yi) in d.headers_y" @click="select({y: [yi, row]})" :class="{'selected': isSelected2({y: [yi, row]}), 'clickable': true}">
+            {{row == 0 ? header[row] : header[row] == header[row-1] ? '' : header[row]}}
+          </th>
+          <td v-for="col in colIndex"
+             :class="{'selected': isSelected2({y: [d.headers_y.length-1, row], x: [d.headers_x.length-1, col]}), 'clickable': true}"
+             @click="select({y: [d.headers_y.length-1, row], x: [d.headers_x.length-1, col]})"
+          >
+            {{d.values[col][row]}}
+          </td>
+          <td>
+            {{d.values_y[row]}}
+          </td>
+        </tr>
+
+        <tr>
+          <th>Total </td>
+          <th v-for="axis in Math.max(0, d.y.length-1)"></th>
+          <td v-for="value in d.values_x">{{value}} </td>
+          <td>
+            {{d.total}}
+          </td>
+        </tr>
+      </table>
+      </div>
+  </div>
+</div>
+</template>
+
+<script id="pivottable-vaex">
+module.exports = {
+  computed: {
+    rowIndex() {
+      return [...Array(this.d.counts_y).keys()];
+    },
+    colIndex() {
+      return [...Array(this.d.counts_x).keys()];
+    },
+  },
+  methods: {
+    select(values) {
+      console.log(values, this.selected);
+      if (_.isEqual(values, this.selected)) {
+        this.selected = {};
+      } else {
+        this.selected = values;
+      }
+    },
+    levelValue(axis, levels, index) {
+      values = [];
+      for (let level = 0; level < levels + 1; level++) {
+        values.push(this.d[`headers_${axis}`][level][index]);
+      }
+      // console.log(values)
+      return values;
+    },
+    isSelected2(values) {
+      selected_value = selected = true;
+      if (_.isEqual(this.selected, {})) {
+        return false;
+      }
+      console.log(values);
+      if (values) {
+        // if('x' in values && 'x' in this.selected) {
+        if ("x" in this.selected) {
+          if ("x" in values) {
+            const levelsSelected = this.selected.x[0];
+            const indexSelected = this.selected.x[1];
+            const levelsCurrent = Math.min(levelsSelected, values.x[0]);
+            const indexCurrent = values.x[1];
+            const currentValue = this.levelValue(
+              "x",
+              levelsCurrent,
+              indexCurrent
+            );
+            const selectedValue = this.levelValue(
+              "x",
+              levelsSelected,
+              indexSelected
+            );
+            console.log("selectedValue", currentValue, selectedValue);
+            selected &= _.isEqual(currentValue, selectedValue);
+          } else {
+            selected = false;
+          }
+        }
+        if ("y" in this.selected) {
+          if ("y" in values) {
+            const levelsSelected = this.selected.y[0];
+            const indexSelected = this.selected.y[1];
+            const levelsCurrent = Math.min(levelsSelected, values.y[0]);
+            const indexCurrent = values.y[1];
+            const currentValue = this.levelValue(
+              "y",
+              levelsCurrent,
+              indexCurrent
+            );
+            const selectedValue = this.levelValue(
+              "y",
+              levelsSelected,
+              indexSelected
+            );
+            console.log("selectedValue", currentValue, selectedValue);
+            selected &= _.isEqual(currentValue, selectedValue);
+          } else {
+            selected = false;
+          }
+        } else if (!("y" in values)) {
+          // selected = false;
+        }
+      }
+      return selected;
+    },
+  },
+};
+</script>
+
+<style id="pivottable-vaex">
+.pivottable th,
+.pivottable td {
+  padding: 10px;
+  text-align: end;
+}
+.pivottable .clickable {
+  cursor: pointer;
+}
+.pivottable td.clickable {
+  /* font-weight: 500; */
+  text-decoration: underline;
+}
+.pivottable th {
+  border-bottom: 1px solid #ccc;
+}
+
+.pivottable td {
+  border-bottom: 1px solid #eee;
+}
+
+.pivottable .selected {
+  background-color: #eee;
+}
+</style>

solara/components/progress.py

@@ -0,0 +1,47 @@
+from typing import Dict, List, Union
+
+import reacton.ipyvuetify as v
+
+import solara
+import solara.util
+
+
+@solara.component
+def ProgressLinear(
+    value: Union[bool, float] = True,
+    color="primary",
+    style: Union[str, Dict[str, str], None] = None,
+    classes: List[str] = [],
+):
+    """Progress bar component showing a percentage, indeterminate or hidden.
+
+     * When `value` is `True`, the progress bar will be indeterminate.
+     * When `value` is `False`, the progress bar will be hidden, but still take up space.
+       This can be used to avoid the page to jump when the progress bar is shown and hidden.
+     * When `value` is a number between 0 and 100, the progress bar will show the percentage.
+
+    ### Basic example
+
+    ```solara
+    import solara
+
+    @solara.component
+    def Page():
+        solara.ProgressLinear(value=30, color="purple")
+        solara.ProgressLinear(True)
+    ```
+
+    ## Arguments
+     * `value`: Value of the progress bar. Can be a number between 0 and 100, `True` for indeterminate or `False` to hide.
+     * `color`: Color of the progress bar.
+     * `style`: CSS style to add to the progress bar.
+     * `classes`: List of classes to apply to the progress bar.
+
+    """
+    indeterminate = value is True
+
+    style_flat = solara.util._flatten_style(style)
+    if value is False:
+        style_flat = "visibility: hidden;" + style_flat
+    class_ = solara.util._combine_classes(classes)
+    v.ProgressLinear(indeterminate=indeterminate, value=value if value is not True else None, color=color, style_=style_flat, class_=class_)

solara/components/select.py

@@ -0,0 +1,182 @@
+from typing import Callable, Dict, List, Optional, TypeVar, Union, cast, overload
+
+import ipyvuetify as v
+import reacton.core
+
+import solara
+from solara.alias import rv
+from solara.util import _combine_classes
+
+T = TypeVar("T")
+
+
+@overload
+def Select(
+    label: str,
+    values: List[T],
+    value: None = ...,
+    on_value: Optional[Callable[[Optional[T]], None]] = ...,
+    dense: bool = ...,
+    disabled: bool = ...,
+    classes: List[str] = [],
+    style: Union[str, Dict[str, str], None] = None,
+) -> reacton.core.ValueElement[v.Select, T]: ...
+
+
+@overload
+def Select(
+    label: str,
+    values: List[T],
+    value: T = ...,
+    on_value: Optional[Callable[[T], None]] = ...,
+    dense: bool = ...,
+    disabled: bool = ...,
+    classes: List[str] = [],
+    style: Union[str, Dict[str, str], None] = None,
+) -> reacton.core.ValueElement[v.Select, T]: ...
+
+
+@overload
+def Select(
+    label: str,
+    values: List[T],
+    value: solara.Reactive[Optional[T]] = ...,
+    on_value: Optional[Callable[[Optional[T]], None]] = ...,
+    dense: bool = ...,
+    disabled: bool = ...,
+    classes: List[str] = [],
+    style: Union[str, Dict[str, str], None] = None,
+) -> reacton.core.ValueElement[v.Select, T]: ...
+
+
+@overload
+def Select(
+    label: str,
+    values: List[T],
+    value: solara.Reactive[T] = ...,
+    on_value: Optional[Callable[[T], None]] = None,
+    dense: bool = ...,
+    disabled: bool = ...,
+    classes: List[str] = [],
+    style: Union[str, Dict[str, str], None] = None,
+) -> reacton.core.ValueElement[v.Select, T]: ...
+
+
+@solara.value_component(None)
+def Select(
+    label: str,
+    values: List[T],
+    value: Union[None, T, solara.Reactive[T], solara.Reactive[Optional[T]]] = None,
+    on_value: Union[None, Callable[[T], None], Callable[[Optional[T]], None]] = None,
+    dense: bool = False,
+    disabled: bool = False,
+    classes: List[str] = [],
+    style: Union[str, Dict[str, str], None] = None,
+) -> reacton.core.ValueElement[v.Select, T]:
+    """Select a single value from a list of values.
+
+    ### Basic example:
+
+    ```solara
+    import solara
+
+    foods = ["Kiwi", "Banana", "Apple"]
+    food = solara.reactive("Banana")
+
+
+    @solara.component
+    def Page():
+        solara.Select(label="Food", value=food, values=foods)
+        solara.Markdown(f"**Selected**: {food.value}")
+    ```
+
+    ## Arguments
+
+     * `label`: Label to display next to the select.
+     * `value`: The currently selected value.
+     * `values`: List of values to select from.
+     * `on_value`: Callback to call when the value changes.
+     * `dense`: Whether to use a denser style.
+     * `disabled`: Whether the select widget allow user interaction
+     * `classes`: List of CSS classes to apply to the select.
+     * `style`: CSS style to apply to the select.
+
+    """
+    # next line is very hard to get right with typing
+    # might need an overload on use_reactive, when value is None
+    reactive_value = solara.use_reactive(value, on_value)  # type: ignore
+    del value, on_value
+    style_flat = solara.util._flatten_style(style)
+    class_ = _combine_classes(classes)
+    return cast(
+        reacton.core.ValueElement[v.Select, T],
+        rv.Select(
+            v_model=reactive_value.value,
+            on_v_model=reactive_value.set,
+            items=values,
+            label=label,
+            dense=dense,
+            disabled=disabled,
+            class_=class_,
+            style_=style_flat,
+        ),
+    )
+
+
+@solara.value_component(None)
+def SelectMultiple(
+    label: str,
+    values: List[T],
+    all_values: List[T],
+    on_value: Callable[[List[T]], None] = None,
+    dense: bool = False,
+    disabled: bool = False,
+    classes: List[str] = [],
+    style: Union[str, Dict[str, str], None] = None,
+) -> reacton.core.ValueElement[v.Select, List[T]]:
+    """Select multiple values from a list of values.
+
+    ### Basic example:
+
+    ```solara
+    import solara
+
+    all_languages = "Python C++ Java JavaScript TypeScript BASIC".split()
+    languages = solara.reactive([all_languages[0]])
+
+
+    @solara.component
+    def Page():
+        solara.SelectMultiple("Languages", languages, all_languages)
+        solara.Markdown(f"**Selected**: {languages.value}")
+    ```
+
+    ## Arguments
+
+     * `label`: Label to display next to the select.
+     * `values`: List of currently selected values.
+     * `all_values`: List of all values to select from.
+     * `on_value`: Callback to call when the value changes.
+     * `dense`: Whether to use a denser style.
+     * `disabled`: Whether the select widget allow user interaction
+     * `classes`: List of CSS classes to apply to the select.
+     * `style`: CSS style to apply to the select.
+    """
+    reactive_values = solara.use_reactive(values, on_value)
+    del values, on_value
+    style_flat = solara.util._flatten_style(style)
+    class_ = _combine_classes(classes)
+    return cast(
+        reacton.core.ValueElement[v.Select, List[T]],
+        rv.Select(
+            v_model=reactive_values.value,
+            on_v_model=reactive_values.set,
+            items=all_values,
+            label=label,
+            multiple=True,
+            dense=dense,
+            disabled=disabled,
+            class_=class_,
+            style_=style_flat,
+        ),
+    )

solara/components/select.vue

@@ -0,0 +1,27 @@
+<template>
+  <v-autocomplete
+    :items="items"
+    v-model="value"
+    :messages="messages"
+    :multiple="multiple"
+    :return-object="return_object"
+    :clearable="clearable"
+    :label="label"
+    class="solara-cross-filter-select"
+  >
+    <template v-slot:item="{ item }">
+      <v-list-item-content>
+        <v-list-item-title v-text="item.text"></v-list-item-title>
+        <v-list-item-subtitle>
+          <v-progress-linear :value="(item.count / count) * 100"></v-progress-linear>
+          <div style="display: flex">
+            <span v-if="count > 0"> {{ ((item.count / count) * 100).toFixed(1) }}%</span>
+            <v-spacer></v-spacer>
+            <span v-if="filtered"> {{ item.count }} of {{ count }} after filtering </span>
+            <span v-if="!filtered">{{ item.count_max }} of {{ count }} </span>
+          </div>
+        </v-list-item-subtitle>
+      </v-list-item-content>
+    </template>
+  </v-autocomplete>
+</template>