#107: circular progress now using ratio 0.0 to 1.0

api_docs_and_examples.py

@@ -547,11 +547,8 @@ Just pass a property of the model as parameter to these methods to create the bi
                 self.number = 1
 
             @property
-            def progress_float(self) -> float:
+            def progress(self) -> float:
                 return (self.number - 1) / 2
-            @property
-            def progress(self) -> int:
-                return int(self.progress_float * 100)
 
         demo = Demo()
         v = ui.checkbox('visible', value=True)
@@ -560,7 +557,7 @@ Just pass a property of the model as parameter to these methods to create the bi
             ui.toggle({1: 'a', 2: 'b', 3: 'c'}).bind_value(demo, 'number')
             ui.number().bind_value(demo, 'number')
 
-            with ui.linear_progress(target_object=demo, target_name='progress_float'):
+            with ui.linear_progress(target_object=demo, target_name='progress'):
                 with ui.container(classes='absolute-full flex flex-center'):
                     lbl = ui.label(text='number').classes('text-center text-subtitle2 text-white')
                     lbl.bind_text_from(demo, 'progress')

nicegui/elements/progress.py

@@ -5,13 +5,13 @@ from ..auto_context import ContextMixin
 
 class LinearProgress(FloatElement, ContextMixin):
 
-    def __init__(self, *, value: float = 0, target_object=None, target_name=None, **kwargs):
+    def __init__(self, *, value: float = 0.0, target_object=None, target_name=None, **kwargs):
         """LinearProgress
 
         An element to create a linear progress bar wrapping
         `Linear Progress <https://v1.quasar.dev/vue-components/linear-progress>`_ component.
 
-        :param value: the initial value of the field
+        :param value: the initial value of the field (ratio 0.0 - 1.0)
         :param target_object: the object to data bind to
         :param target_name: the field name of the data bound object
         """
@@ -23,17 +23,18 @@ class LinearProgress(FloatElement, ContextMixin):
 
 class CircularProgress(FloatElement, ContextMixin):
 
-    def __init__(self, *, value: float = 0, target_object=None, target_name=None, show_value: bool = True,
+    def __init__(self, *, value: float = 0.0, target_object=None, target_name=None, show_value: bool = True,
                  **kwargs):
         """CircularProgress
 
         An element to create a linear progress bar wrapping
         `Circular Progress <https://v1.quasar.dev/vue-components/circular-progress>`_ component.
 
-        :param value: the initial value of the field
+        :param value: the initial value of the field (ratio 0.0 - 1.0)
         :param target_object: the object to data bind to
         :param target_name: the field name of the data bound object
         """
+        value = self._convert_ratio(value)
         view = QCircularProgressExtended(color='primary', value=value, temp=False,
                                          track_color='grey-4',
                                          center_color='transparent',
@@ -41,3 +42,16 @@ class CircularProgress(FloatElement, ContextMixin):
         super().__init__(view, value=value, on_change=None, **kwargs)
         if target_object and target_name:
             self.bind_value_from(target_object=target_object, target_name=target_name)
+
+    @property
+    def value(self):
+        val = getattr(self, '_value')
+        return val
+
+    @value.setter
+    def value(self, value):
+        val = self._convert_ratio(value=value)
+        setattr(self, '_value', val)
+
+    def _convert_ratio(self, value: float) -> float:
+        return round(value * 100, 2) if 0.0 <= value <= 1.0 else float(value)