diff --git a/Dash.NET.CSharp/Callback.fs b/Dash.NET.CSharp/Callback.fs index b287c8c..f434c09 100644 --- a/Dash.NET.CSharp/Callback.fs +++ b/Dash.NET.CSharp/Callback.fs @@ -1,6 +1,7 @@ namespace Dash.NET.CSharp open System.Runtime.InteropServices +open Dash.NET.CSharp.DCC type Dependency = System.ValueTuple @@ -9,6 +10,30 @@ type internal Helpers = static member internal ConvertDependency ((id, prop) : System.ValueTuple) = Dash.NET.Dependency.create (id, prop |> ComponentProperty.Unwrap) type CallbackResult = internal WrappedCallbackResult of Dash.NET.CallbackResultBinding with + //static member Create(target : Dependency, results : obj array) = + // { + // Dash.NET.CallbackResultBinding.Target = target |> Helpers.ConvertDependency + // Dash.NET.CallbackResultBinding.BoxedResult = + // [ + // for result in results do + // match result with + // | :? IUnwrap as result -> result.Unwrap() + // | _ -> result + // ] + // |> box + // } + // |> WrappedCallbackResult + + //static member Create(target : Dependency, result : obj) = + // { + // Dash.NET.CallbackResultBinding.Target = target |> Helpers.ConvertDependency + // Dash.NET.CallbackResultBinding.BoxedResult = + // match result with + // | :? IUnwrap as result -> result.Unwrap() |> box + // | _ -> result |> box + // } + // |> WrappedCallbackResult + static member Create<'a>(target : Dependency, result : 'a) = { Dash.NET.CallbackResultBinding.Target = target |> Helpers.ConvertDependency diff --git a/Dash.NET.CSharp/ComponentPropTypes.fs b/Dash.NET.CSharp/ComponentPropTypes.fs index c0f235f..98174e2 100644 --- a/Dash.NET.CSharp/ComponentPropTypes.fs +++ b/Dash.NET.CSharp/ComponentPropTypes.fs @@ -4,6 +4,9 @@ open System open System.Runtime.InteropServices +type IUnwrap = + abstract Unwrap: unit -> obj + //module ComponentPropTypes = type InputType = private WrappedInputType of Dash.NET.ComponentPropTypes.InputType with @@ -38,11 +41,25 @@ type InputMode = private WrappedInputMode of Dash.NET.ComponentPropTypes.InputMo // SpellCheckOptions can be exposed as a bool -type LoadingState = private WrappedLoadingState of Dash.NET.ComponentPropTypes.LoadingState with - static member internal Convert (v : LoadingState) : Dash.NET.ComponentPropTypes.LoadingState = match v with WrappedLoadingState v -> v - static member Init (isLoading : bool, [] propName : string, [] componentName : string) = +//type LoadingState = private WrappedLoadingState of Dash.NET.ComponentPropTypes.LoadingState with +// static member internal Unwrap (v : LoadingState) : Dash.NET.ComponentPropTypes.LoadingState = match v with WrappedLoadingState v -> v +// static member Init (isLoading : bool, [] propName : string, [] componentName : string) = +// guardAgainstNull "isLoading" isLoading +// Dash.NET.ComponentPropTypes.LoadingState.init (isLoading, ?propName = Option.ofObj propName, ?componentName = Option.ofObj componentName) |> WrappedLoadingState + +[] +type LoadingState = + { + isLoading: bool + propName: string + componentName: string + } + static member Unwrap (v : LoadingState) : Dash.NET.ComponentPropTypes.LoadingState = Dash.NET.ComponentPropTypes.LoadingState.init (v.isLoading, ?propName = Option.ofObj v.propName, ?componentName = Option.ofObj v.componentName) + +module LoadingState = + let Init (isLoading: bool, [] propName: string, [] componentName: string) : LoadingState = guardAgainstNull "isLoading" isLoading - Dash.NET.ComponentPropTypes.LoadingState.init (isLoading, ?propName = Option.ofObj propName, ?componentName = Option.ofObj componentName) |> WrappedLoadingState + { isLoading = isLoading; propName = propName; componentName = componentName } type PersistenceTypeOptions = private WrappedPersistenceTypeOptions of Dash.NET.ComponentPropTypes.PersistenceTypeOptions with @@ -53,28 +70,96 @@ type PersistenceTypeOptions = private WrappedPersistenceTypeOptions of Dash.NET. static member Session () = Dash.NET.ComponentPropTypes.PersistenceTypeOptions.Session |> PersistenceTypeOptions.Wrap static member Memory () = Dash.NET.ComponentPropTypes.PersistenceTypeOptions.Memory |> PersistenceTypeOptions.Wrap -type DropdownOption = private WrappedDropdownOption of Dash.NET.ComponentPropTypes.DropdownOption with - static member internal Convert (v : DropdownOption) = match v with WrappedDropdownOption v -> v - static member Init (label : IConvertible, value : IConvertible, [] disabled : Nullable, [] title : string) = +//type DropdownOption = private WrappedDropdownOption of Dash.NET.ComponentPropTypes.DropdownOption with +// static member internal Unwrap (v : DropdownOption) = match v with WrappedDropdownOption v -> v +// static member Init (label : IConvertible, value : IConvertible, [] disabled : Nullable, [] title : string) = +// guardAgainstNull "label" label +// guardAgainstNull "value" value +// Dash.NET.ComponentPropTypes.DropdownOption.init (label, value, ?disabled = Option.ofNullable disabled, ?title = Option.ofObj title) |> WrappedDropdownOption + +[] +type DropdownOption<'a, 'b when 'a :> IConvertible and 'b :> IConvertible> = + { + label: 'a + value: 'b + disabled: Nullable + title: string + } + static member Unwrap (v : DropdownOption<'a, 'b>) : Dash.NET.ComponentPropTypes.DropdownOption = Dash.NET.ComponentPropTypes.DropdownOption.init (v.label, v.value, ?disabled = Option.ofNullable v.disabled, ?title = Option.ofObj v.title) + +module DropdownOption = + let Init<'a, 'b when 'a :> IConvertible and 'b :> IConvertible> (label:'a, value:'b, [] disabled: Nullable, [] title: string) : DropdownOption<'a, 'b> = guardAgainstNull "label" label guardAgainstNull "value" value - Dash.NET.ComponentPropTypes.DropdownOption.init (label, value, ?disabled = Option.ofNullable disabled, ?title = Option.ofObj title) |> WrappedDropdownOption + { label = label; value = value; disabled = disabled; title = title } + +//type RadioItemsOption = private WrappedRadioItemsOption of Dash.NET.ComponentPropTypes.RadioItemsOption with +// static member Unwrap (v : RadioItemsOption) : Dash.NET.ComponentPropTypes.RadioItemsOption = match v with WrappedRadioItemsOption v -> v +// static member Init (label : IConvertible, value : IConvertible, [] disabled : Nullable) = +// guardAgainstNull "label" label +// guardAgainstNull "value" value +// Dash.NET.ComponentPropTypes.RadioItemsOption.init (label, value, ?disabled = Option.ofNullable disabled) |> WrappedRadioItemsOption +// interface IUnwrap with +// member x.Unwrap () = RadioItemsOption.Unwrap x |> box + +open DynamicObj + +[] +type RadioItemsOption<'a, 'b when 'a :> IConvertible and 'b :> IConvertible> = + { + label : 'a + value : 'b + disabled : Nullable + } + with + //static member Init(label:'a, value:'b, []disabled:Nullable) = { label = label; value = value; disabled = disabled} + static member Unwrap (v : RadioItemsOption<'a, 'b>) : Dash.NET.ComponentPropTypes.RadioItemsOption = Dash.NET.ComponentPropTypes.RadioItemsOption.init (v.label, v.value, ?disabled = Option.ofNullable v.disabled) -type RadioItemsOption = private WrappedRadioItemsOption of Dash.NET.ComponentPropTypes.RadioItemsOption with - static member internal Convert (v : RadioItemsOption) : Dash.NET.ComponentPropTypes.RadioItemsOption = match v with WrappedRadioItemsOption v -> v - static member Init (label : IConvertible, value : IConvertible, [] disabled : Nullable) = +module RadioItemsOption = + let Init<'a, 'b when 'a :> IConvertible and 'b :> IConvertible> (label: 'a, value: 'b, [] disabled: Nullable) : RadioItemsOption<'a, 'b> = guardAgainstNull "label" label guardAgainstNull "value" value - Dash.NET.ComponentPropTypes.RadioItemsOption.init (label, value, ?disabled = Option.ofNullable disabled) |> WrappedRadioItemsOption + { label = label; value = value; disabled = disabled } + -type TabColors = private WrappedTabColors of Dash.NET.ComponentPropTypes.TabColors with - static member internal Convert (v : TabColors) : Dash.NET.ComponentPropTypes.TabColors = match v with WrappedTabColors v -> v - static member Init ([] border : string, [] primary : string, [] background : string) = - Dash.NET.ComponentPropTypes.TabColors.init (?border = Option.ofObj border, ?primary = Option.ofObj primary, ?background = Option.ofObj background) |> WrappedTabColors - -type ChecklistOption = private WrappedChecklistOption of Dash.NET.ComponentPropTypes.ChecklistOption with - static member internal Convert (v : ChecklistOption) : Dash.NET.ComponentPropTypes.ChecklistOption = match v with WrappedChecklistOption v -> v - static member Init (label : IConvertible, value : IConvertible, [] disabled : Nullable) = +//type TabColors = private WrappedTabColors of Dash.NET.ComponentPropTypes.TabColors with +// static member internal Unwrap (v : TabColors) : Dash.NET.ComponentPropTypes.TabColors = match v with WrappedTabColors v -> v +// static member Init ([] border : string, [] primary : string, [] background : string) = +// Dash.NET.ComponentPropTypes.TabColors.init (?border = Option.ofObj border, ?primary = Option.ofObj primary, ?background = Option.ofObj background) |> WrappedTabColors + +[] +type TabColors = + { + border: string + primary: string + background: string + } + static member Unwrap (v : TabColors) : Dash.NET.ComponentPropTypes.TabColors = Dash.NET.ComponentPropTypes.TabColors.init (?border = Option.ofObj v.border, ?primary = Option.ofObj v.primary, ?background = Option.ofObj v.background) + +module TabColors = + let Init ([] border: string, [] primary: string, [] background: string) : TabColors = + { border = border; primary = primary; background = background } + + +//type ChecklistOption = private WrappedChecklistOption of Dash.NET.ComponentPropTypes.ChecklistOption with +// static member internal Unwrap (v : ChecklistOption) : Dash.NET.ComponentPropTypes.ChecklistOption = match v with WrappedChecklistOption v -> v +// static member Init (label : IConvertible, value : IConvertible, [] disabled : Nullable) = +// guardAgainstNull "label" label +// guardAgainstNull "value" value +// Dash.NET.ComponentPropTypes.ChecklistOption.init (label, value, ?disabled = Option.ofNullable disabled) |> WrappedChecklistOption + +[] +type ChecklistOption<'a, 'b when 'a :> IConvertible and 'b :> IConvertible> = + { + label: 'a + value: 'b + disabled: Nullable + title: string + } + static member Unwrap (v : ChecklistOption<'a, 'b>) : Dash.NET.ComponentPropTypes.ChecklistOption = Dash.NET.ComponentPropTypes.ChecklistOption.init (v.label, v.value, ?disabled = Option.ofNullable v.disabled) + +module ChecklistOption = + let Init<'a, 'b when 'a :> IConvertible and 'b :> IConvertible> (label:'a, value:'b, [] disabled: Nullable, [] title: string) : ChecklistOption<'a, 'b> = guardAgainstNull "label" label guardAgainstNull "value" value - Dash.NET.ComponentPropTypes.ChecklistOption.init (label, value, ?disabled = Option.ofNullable disabled) |> WrappedChecklistOption \ No newline at end of file + { label = label; value = value; disabled = disabled; title = title } \ No newline at end of file diff --git a/Dash.NET.CSharp/CoreComponents/Checklist.fs b/Dash.NET.CSharp/CoreComponents/Checklist.fs index 85c6257..e13a95f 100644 --- a/Dash.NET.CSharp/CoreComponents/Checklist.fs +++ b/Dash.NET.CSharp/CoreComponents/Checklist.fs @@ -21,10 +21,10 @@ module Checklist = /// ///An array of options /// - static member options([] p : ChecklistOption array) = + static member options([] p : ChecklistOption<'a,'b> array) = guardAgainstNull "p" p p |> Array.iter (guardAgainstNull "p") - OAttr.options (p |> Array.map ChecklistOption.Convert) |> Attr.Wrap + OAttr.options (p |> Array.map ChecklistOption.Unwrap) |> Attr.Wrap /// ///The currently selected value /// @@ -76,7 +76,7 @@ module Checklist = /// static member loadingState(p: LoadingState) = guardAgainstNull "p" p - OAttr.loadingState (p |> LoadingState.Convert) |> Attr.Wrap + OAttr.loadingState (p |> LoadingState.Unwrap) |> Attr.Wrap /// ///Used to allow user interactions in this component to be persisted when ///the component - or the page - is refreshed. If `persisted` is truthy and @@ -156,44 +156,44 @@ module Checklist = ///The values and labels of the checklist are specified in the `options` ///property and the checked items are specified with the `value` property. ///Each checkbox is rendered as an input with a surrounding label. - /// + ///  ///Properties: - /// + ///  ///• id (string) - The ID of this component, used to identify dash components ///in callbacks. The ID needs to be unique across all of the ///components in an app. - /// + ///  ///• options (list with values of type: record with the fields: 'label: string | number (required)', 'value: string | number (required)', 'disabled: boolean (optional)'; default []) - An array of options - /// + ///  ///• value (list with values of type: string | number; default []) - The currently selected value - /// + ///  ///• className (string) - The class of the container (div) - /// + ///  ///• style (record) - The style of the container (div) - /// + ///  ///• inputStyle (record; default {}) - The style of the <input> checkbox element - /// + ///  ///• inputClassName (string; default ) - The class of the <input> checkbox element - /// + ///  ///• labelStyle (record; default {}) - The style of the <label> that wraps the checkbox input /// and the option's label - /// + ///  ///• labelClassName (string; default ) - The class of the <label> that wraps the checkbox input /// and the option's label - /// + ///  ///• loading_state (record with the fields: 'is_loading: boolean (optional)', 'prop_name: string (optional)', 'component_name: string (optional)') - Object that holds the loading state object coming from dash-renderer - /// + ///  ///• persistence (boolean | string | number) - Used to allow user interactions in this component to be persisted when ///the component - or the page - is refreshed. If `persisted` is truthy and ///hasn't changed from its previous value, a `value` that the user has ///changed while using the app will keep that change, as long as ///the new `value` also matches what was given originally. ///Used in conjunction with `persistence_type`. - /// + ///  ///• persisted_props (list with values of type: value equal to: 'value'; default ['value']) - Properties whose user interactions will persist after refreshing the ///component or the page. Since only `value` is allowed this prop can ///normally be ignored. - /// + ///  ///• persistence_type (value equal to: 'local', 'session', 'memory'; default local) - Where persisted user changes will be stored: ///memory: only kept in memory, reset on page refresh. ///local: window.localStorage, data is kept after the browser quit. diff --git a/Dash.NET.CSharp/CoreComponents/Dropdown.fs b/Dash.NET.CSharp/CoreComponents/Dropdown.fs index a4cc47b..6f1c8d2 100644 --- a/Dash.NET.CSharp/CoreComponents/Dropdown.fs +++ b/Dash.NET.CSharp/CoreComponents/Dropdown.fs @@ -36,10 +36,10 @@ module Dropdown = ///An array of options {label: [string|number], value: [string|number]}, ///an optional disabled field can be used for each option /// - static member options([] p: DropdownOption array) = + static member options([] p: DropdownOption<'a,'b> array) = guardAgainstNull "p" p p |> Seq.iter (guardAgainstNull "p") - OAttr.options (p |> Seq.map DropdownOption.Convert) |> Attr.Wrap + OAttr.options (p |> Seq.map DropdownOption.Unwrap) |> Attr.Wrap /// ///The value of the input. If `multi` is false (the default) ///then value is just a string that corresponds to the values @@ -127,7 +127,7 @@ module Dropdown = /// static member loadingState(p: LoadingState) = guardAgainstNull "p" p - OAttr.loadingState (p |> LoadingState.Convert) |> Attr.Wrap + OAttr.loadingState (p |> LoadingState.Unwrap) |> Attr.Wrap /// ///Used to allow user interactions in this component to be persisted when ///the component - or the page - is refreshed. If `persisted` is truthy and @@ -211,56 +211,56 @@ module Dropdown = ///Use a dropdown when you have many options (more than 5) or when you are ///constrained for space. Otherwise, you can use RadioItems or a Checklist, ///which have the benefit of showing the users all of the items at once. - /// + ///  ///Properties: - /// + ///  ///• id (string) - The ID of this component, used to identify dash components ///in callbacks. The ID needs to be unique across all of the ///components in an app. - /// + ///  ///• options (list with values of type: record with the fields: 'label: string | number (required)', 'value: string | number (required)', 'disabled: boolean (optional)', 'title: string (optional)') - An array of options {label: [string|number], value: [string|number]}, ///an optional disabled field can be used for each option - /// + ///  ///• value (string | number | list with values of type: string | number) - The value of the input. If `multi` is false (the default) ///then value is just a string that corresponds to the values ///provided in the `options` property. If `multi` is true, then ///multiple values can be selected at once, and `value` is an ///array of items with values corresponding to those in the ///`options` prop. - /// + ///  ///• optionHeight (number; default 35) - height of each option. Can be increased when label lengths would wrap around - /// + ///  ///• className (string) - className of the dropdown element - /// + ///  ///• clearable (boolean; default true) - Whether or not the dropdown is "clearable", that is, whether or ///not a small "x" appears on the right of the dropdown that removes ///the selected value. - /// + ///  ///• disabled (boolean; default false) - If true, this dropdown is disabled and the selection cannot be changed. - /// + ///  ///• multi (boolean; default false) - If true, the user can select multiple values - /// + ///  ///• placeholder (string) - The grey, default text shown when no option is selected - /// + ///  ///• searchable (boolean; default true) - Whether to enable the searching feature or not - /// + ///  ///• search_value (string) - The value typed in the DropDown for searching. - /// + ///  ///• style (record) - Defines CSS styles which will override styles previously set. - /// + ///  ///• loading_state (record with the fields: 'is_loading: boolean (optional)', 'prop_name: string (optional)', 'component_name: string (optional)') - Object that holds the loading state object coming from dash-renderer - /// + ///  ///• persistence (boolean | string | number) - Used to allow user interactions in this component to be persisted when ///the component - or the page - is refreshed. If `persisted` is truthy and ///hasn't changed from its previous value, a `value` that the user has ///changed while using the app will keep that change, as long as ///the new `value` also matches what was given originally. ///Used in conjunction with `persistence_type`. - /// + ///  ///• persisted_props (list with values of type: value equal to: 'value'; default ['value']) - Properties whose user interactions will persist after refreshing the ///component or the page. Since only `value` is allowed this prop can ///normally be ignored. - /// + ///  ///• persistence_type (value equal to: 'local', 'session', 'memory'; default local) - Where persisted user changes will be stored: ///memory: only kept in memory, reset on page refresh. ///local: window.localStorage, data is kept after the browser quit. diff --git a/Dash.NET.CSharp/CoreComponents/Graph.fs b/Dash.NET.CSharp/CoreComponents/Graph.fs index ffaa317..8c44881 100644 --- a/Dash.NET.CSharp/CoreComponents/Graph.fs +++ b/Dash.NET.CSharp/CoreComponents/Graph.fs @@ -152,7 +152,7 @@ module Graph = /// static member loadingState(p: Dash.NET.CSharp.DCC.LoadingState) = guardAgainstNull "p" p - Dash.NET.DCC.Graph.Attr.loadingState (p |> Dash.NET.CSharp.DCC.LoadingState.Convert) |> Attr.Wrap + Dash.NET.DCC.Graph.Attr.loadingState (p |> Dash.NET.CSharp.DCC.LoadingState.Unwrap) |> Attr.Wrap /// ///The child or children of this dash component /// diff --git a/Dash.NET.CSharp/CoreComponents/Input.fs b/Dash.NET.CSharp/CoreComponents/Input.fs index 3b51dd5..b6be37f 100644 --- a/Dash.NET.CSharp/CoreComponents/Input.fs +++ b/Dash.NET.CSharp/CoreComponents/Input.fs @@ -170,7 +170,7 @@ module Input = /// ///Object that holds the loading state object coming from dash-renderer /// - static member loadingState(p: LoadingState) = OAttr.loadingState (p |> LoadingState.Convert) |> Attr.Wrap + static member loadingState(p: LoadingState) = OAttr.loadingState (p |> LoadingState.Unwrap) |> Attr.Wrap /// ///Used to allow user interactions in this component to be persisted when ///the component - or the page - is refreshed. If `persisted` is truthy and @@ -227,104 +227,104 @@ module Input = ///Note that checkbox and radio types are supported through ///the Checklist and RadioItems component. Dates, times, and file uploads ///are also supported through separate components. - /// + ///  ///Properties: - /// + ///  ///• id (string) - The ID of this component, used to identify dash components ///in callbacks. The ID needs to be unique across all of the ///components in an app. - /// + ///  ///• value (string | number) - The value of the input - /// + ///  ///• style (record) - The input's inline styles - /// + ///  ///• className (string) - The class of the input element - /// + ///  ///• debounce (boolean; default false) - If true, changes to input will be sent back to the Dash server only on enter or when losing focus. ///If it's false, it will sent the value back on every change. - /// + ///  ///• type (value equal to: 'text', 'number', 'password', 'email', 'range', 'search', 'tel', 'url', 'hidden'; default text) - The type of control to render. - /// + ///  ///• autoComplete (string) - This attribute indicates whether the value of the control can be automatically completed by the browser. - /// + ///  ///• autoFocus (value equal to: 'autoFocus', 'autofocus', 'AUTOFOCUS' | boolean) - The element should be automatically focused after the page loaded. ///autoFocus is an HTML boolean attribute - it is enabled by a boolean or ///'autoFocus'. Alternative capitalizations `autofocus` & `AUTOFOCUS` ///are also acccepted. - /// + ///  ///• disabled (value equal to: 'disabled', 'DISABLED' | boolean) - If true, the input is disabled and can't be clicked on. ///disabled is an HTML boolean attribute - it is enabled by a boolean or ///'disabled'. Alternative capitalizations `DISABLED` - /// + ///  ///• inputMode (value equal to: 'verbatim', 'latin', 'latin-name', 'latin-prose', 'full-width-latin', 'kana', 'katakana', 'numeric', 'tel', 'email', 'url') - Provides a hint to the browser as to the type of data that might be ///entered by the user while editing the element or its contents. - /// + ///  ///• list (string) - Identifies a list of pre-defined options to suggest to the user. ///The value must be the id of a <datalist> element in the same document. ///The browser displays only options that are valid values for this ///input element. ///This attribute is ignored when the type attribute's value is ///hidden, checkbox, radio, file, or a button type. - /// + ///  ///• max (string | number) - The maximum (numeric or date-time) value for this item, which must not be less than its minimum (min attribute) value. - /// + ///  ///• maxLength (string | number) - If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the maximum number of characters (in UTF-16 code units) that the user can enter. For other control types, it is ignored. It can exceed the value of the size attribute. If it is not specified, the user can enter an unlimited number of characters. Specifying a negative number results in the default behavior (i.e. the user can enter an unlimited number of characters). The constraint is evaluated only when the value of the attribute has been changed. - /// + ///  ///• min (string | number) - The minimum (numeric or date-time) value for this item, which must not be greater than its maximum (max attribute) value. - /// + ///  ///• minLength (string | number) - If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the minimum number of characters (in Unicode code points) that the user can enter. For other control types, it is ignored. - /// + ///  ///• multiple (boolean) - This Boolean attribute indicates whether the user can enter more than one value. This attribute applies when the type attribute is set to email or file, otherwise it is ignored. - /// + ///  ///• name (string) - The name of the control, which is submitted with the form data. - /// + ///  ///• pattern (string) - A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is text, search, tel, url, email, or password, otherwise it is ignored. The regular expression language is the same as JavaScript RegExp algorithm, with the 'u' parameter that makes it treat the pattern as a sequence of unicode code points. The pattern is not surrounded by forward slashes. - /// + ///  ///• placeholder (string | number) - A hint to the user of what can be entered in the control . The placeholder text must not contain carriage returns or line-feeds. Note: Do not use the placeholder attribute instead of a <label> element, their purposes are different. The <label> attribute describes the role of the form element (i.e. it indicates what kind of information is expected), and the placeholder attribute is a hint about the format that the content should take. There are cases in which the placeholder attribute is never displayed to the user, so the form must be understandable without it. - /// + ///  ///• readOnly (boolean | value equal to: 'readOnly', 'readonly', 'READONLY') - This attribute indicates that the user cannot modify the value of the control. The value of the attribute is irrelevant. If you need read-write access to the input value, do not add the "readonly" attribute. It is ignored if the value of the type attribute is hidden, range, color, checkbox, radio, file, or a button type (such as button or submit). ///readOnly is an HTML boolean attribute - it is enabled by a boolean or ///'readOnly'. Alternative capitalizations `readonly` & `READONLY` ///are also acccepted. - /// + ///  ///• required (value equal to: 'required', 'REQUIRED' | boolean) - This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the type attribute is hidden, image, or a button type (submit, reset, or button). The :optional and :required CSS pseudo-classes will be applied to the field as appropriate. ///required is an HTML boolean attribute - it is enabled by a boolean or ///'required'. Alternative capitalizations `REQUIRED` ///are also acccepted. - /// + ///  ///• selectionDirection (string) - The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. On platforms on which it's possible this value isn't known, the value can be "none"; for example, on macOS, the default direction is "none", then as the user begins to modify the selection using the keyboard, this will change to reflect the direction in which the selection is expanding. - /// + ///  ///• selectionEnd (string) - The offset into the element's text content of the last selected character. If there's no selection, this value indicates the offset to the character following the current text input cursor position (that is, the position the next character typed would occupy). - /// + ///  ///• selectionStart (string) - The offset into the element's text content of the first selected character. If there's no selection, this value indicates the offset to the character following the current text input cursor position (that is, the position the next character typed would occupy). - /// + ///  ///• size (string) - The initial size of the control. This value is in pixels unless the value of the type attribute is text or password, in which case it is an integer number of characters. Starting in, this attribute applies only when the type attribute is set to text, search, tel, url, email, or password, otherwise it is ignored. In addition, the size must be greater than zero. If you do not specify a size, a default value of 20 is used.' simply states "the user agent should ensure that at least that many characters are visible", but different characters can have different widths in certain fonts. In some browsers, a certain string with x characters will not be entirely visible even if size is defined to at least x. - /// + ///  ///• spellCheck (value equal to: 'true', 'false' | boolean) - Setting the value of this attribute to true indicates that the element needs to have its spelling and grammar checked. The value default indicates that the element is to act according to a default behavior, possibly based on the parent element's own spellcheck value. The value false indicates that the element should not be checked. - /// + ///  ///• step (string | number; default any) - Works with the min and max attributes to limit the increments at which a numeric or date-time value can be set. It can be the string any or a positive floating point number. If this attribute is not set to any, the control accepts only values at multiples of the step value greater than the minimum. - /// + ///  ///• n_submit (number; default 0) - Number of times the `Enter` key was pressed while the input had focus. - /// + ///  ///• n_submit_timestamp (number; default -1) - Last time that `Enter` was pressed. - /// + ///  ///• n_blur (number; default 0) - Number of times the input lost focus. - /// + ///  ///• n_blur_timestamp (number; default -1) - Last time the input lost focus. - /// + ///  ///• loading_state (record with the fields: 'is_loading: boolean (optional)', 'prop_name: string (optional)', 'component_name: string (optional)') - Object that holds the loading state object coming from dash-renderer - /// + ///  ///• persistence (boolean | string | number) - Used to allow user interactions in this component to be persisted when ///the component - or the page - is refreshed. If `persisted` is truthy and ///hasn't changed from its previous value, a `value` that the user has ///changed while using the app will keep that change, as long as ///the new `value` also matches what was given originally. ///Used in conjunction with `persistence_type`. - /// + ///  ///• persisted_props (list with values of type: value equal to: 'value'; default ['value']) - Properties whose user interactions will persist after refreshing the ///component or the page. Since only `value` is allowed this prop can ///normally be ignored. - /// + ///  ///• persistence_type (value equal to: 'local', 'session', 'memory'; default local) - Where persisted user changes will be stored: ///memory: only kept in memory, reset on page refresh. ///local: window.localStorage, data is kept after the browser quit. diff --git a/Dash.NET.CSharp/CoreComponents/Interval.fs b/Dash.NET.CSharp/CoreComponents/Interval.fs index 1db7908..27f88e5 100644 --- a/Dash.NET.CSharp/CoreComponents/Interval.fs +++ b/Dash.NET.CSharp/CoreComponents/Interval.fs @@ -100,20 +100,20 @@ module Interval = ///with a fixed time delay between each increment. ///Interval is good for triggering a component on a recurring basis. ///The time delay is set with the property "interval" in milliseconds. - /// + ///  ///Properties: - /// + ///  ///• id (string) - The ID of this component, used to identify dash components ///in callbacks. The ID needs to be unique across all of the ///components in an app. - /// + ///  ///• interval (number; default 1000) - This component will increment the counter `n_intervals` every ///`interval` milliseconds - /// + ///  ///• disabled (boolean) - If True, the counter will no longer update - /// + ///  ///• n_intervals (number; default 0) - Number of times the interval has passed - /// + ///  ///• max_intervals (number; default -1) - Number of times the interval will be fired. ///If -1, then the interval has no limit (the default) ///and if 0 then the interval stops running. diff --git a/Dash.NET.CSharp/CoreComponents/Location.fs b/Dash.NET.CSharp/CoreComponents/Location.fs index 473cb35..e26ec11 100644 --- a/Dash.NET.CSharp/CoreComponents/Location.fs +++ b/Dash.NET.CSharp/CoreComponents/Location.fs @@ -98,21 +98,21 @@ module Location = /// ///Update and track the current window.location object through the window.history state. ///Use in conjunction with the `dash_core_components.Link` component to make apps with multiple pages. - /// + ///  ///Properties: - /// + ///  ///• id (string) - The ID of this component, used to identify dash components ///in callbacks. The ID needs to be unique across all of the ///components in an app. - /// + ///  ///• pathname (string) - pathname in window.location - e.g., "/my/full/pathname" - /// + ///  ///• search (string) - search in window.location - e.g., "?myargument=1" - /// + ///  ///• hash (string) - hash in window.location - e.g., "#myhash" - /// + ///  ///• href (string) - href in window.location - e.g., "/my/full/pathname?myargument=1#myhash" - /// + ///  ///• refresh (boolean; default true) - Refresh the page when the location is updated? /// let location (id: string, [] attrs: array) = Dash.NET.DCC.Location.location id (attrs |> List.ofArray |> List.map Attr.Unwrap) |> Dash.NET.CSharp.Dsl.DashComponent.Wrap \ No newline at end of file diff --git a/Dash.NET.CSharp/CoreComponents/Markdown.fs b/Dash.NET.CSharp/CoreComponents/Markdown.fs index 23f61b0..298d3c5 100644 --- a/Dash.NET.CSharp/CoreComponents/Markdown.fs +++ b/Dash.NET.CSharp/CoreComponents/Markdown.fs @@ -17,7 +17,7 @@ module Markdown = /// ///value equal to: 'dark', 'light' - /// + ///  ///Color scheme; default 'light' /// type HighlightConfigTheme = private WrappedHighlightConfigTheme of Dash.NET.DCC.Markdown.HighlightConfigTheme with @@ -78,7 +78,7 @@ module Markdown = /// static member loadingState(p: LoadingState) = guardAgainstNull "p" p - OAttr.loadingState (p |> LoadingState.Convert) |> Attr.Wrap + OAttr.loadingState (p |> LoadingState.Unwrap) |> Attr.Wrap /// ///Defines CSS styles which will override styles previously set. /// @@ -115,31 +115,31 @@ module Markdown = ///A component that renders Markdown text as specified by the ///GitHub Markdown spec. These component uses ///[react-markdown](https://remarkjs.github.io/react-markdown/) under the hood. - /// + ///  ///Properties: - /// + ///  ///• id (string) - The ID of this component, used to identify dash components ///in callbacks. The ID needs to be unique across all of the ///components in an app. - /// + ///  ///• className (string) - Class name of the container element - /// + ///  ///• dangerously_allow_html (boolean; default false) - A boolean to control raw HTML escaping. ///Setting HTML from code is risky because it's easy to ///inadvertently expose your users to a cross-site scripting (XSS) ///(https://en.wikipedia.org/wiki/Cross-site_scripting) attack. - /// + ///  ///• children (string | list with values of type: string) - A markdown string (or array of strings) that adhreres to the CommonMark spec - /// + ///  ///• dedent (boolean; default true) - Remove matching leading whitespace from all lines. ///Lines that are empty, or contain *only* whitespace, are ignored. ///Both spaces and tab characters are removed, but only if they match; ///we will not convert tabs to spaces or vice versa. - /// + ///  ///• highlight_config (record with the field: 'theme: value equal to: 'dark', 'light' (optional)'; default {}) - Config options for syntax highlighting. - /// + ///  ///• loading_state (record with the fields: 'is_loading: boolean (optional)', 'prop_name: string (optional)', 'component_name: string (optional)') - Object that holds the loading state object coming from dash-renderer - /// + ///  ///• style (record) - User-defined inline styles for the rendered Markdown /// let markdown (id: string, [] attrs: array) = Dash.NET.DCC.Markdown.markdown id (attrs |> List.ofArray |> List.map Attr.Unwrap) |> Dash.NET.CSharp.Dsl.DashComponent.Wrap \ No newline at end of file diff --git a/Dash.NET.CSharp/CoreComponents/RadioItems.fs b/Dash.NET.CSharp/CoreComponents/RadioItems.fs index 480fce5..93e864b 100644 --- a/Dash.NET.CSharp/CoreComponents/RadioItems.fs +++ b/Dash.NET.CSharp/CoreComponents/RadioItems.fs @@ -26,10 +26,17 @@ module RadioItems = /// ///An array of options /// - static member options([] p: array) = + static member options([] p: array>) = guardAgainstNull "p" p p |> Array.iter (guardAgainstNull "p") - OAttr.options (p |> Array.map RadioItemsOption.Convert) |> Attr.Wrap + OAttr.options (p |> Array.map RadioItemsOption.Unwrap) |> Attr.Wrap + /// + ///An sequence of options + /// + static member options(p: seq>) = + guardAgainstNull "p" p + p |> Seq.iter (guardAgainstNull "p") + OAttr.options (p |> Seq.map RadioItemsOption.Unwrap) |> Attr.Wrap /// ///The currently selected value /// @@ -83,7 +90,7 @@ module RadioItems = /// static member loadingState(p: LoadingState) = guardAgainstNull "p" p - OAttr.loadingState (p |> LoadingState.Convert) |> Attr.Wrap + OAttr.loadingState (p |> LoadingState.Unwrap) |> Attr.Wrap /// ///Used to allow user interactions in this component to be persisted when ///the component - or the page - is refreshed. If `persisted` is truthy and @@ -164,44 +171,44 @@ module RadioItems = ///The values and labels of the RadioItems is specified in the `options` ///property and the seleced item is specified with the `value` property. ///Each radio item is rendered as an input with a surrounding label. - /// + ///  ///Properties: - /// + ///  ///• id (string) - The ID of this component, used to identify dash components ///in callbacks. The ID needs to be unique across all of the ///components in an app. - /// + ///  ///• options (list with values of type: record with the fields: 'label: string | number (required)', 'value: string | number (required)', 'disabled: boolean (optional)'; default []) - An array of options - /// + ///  ///• value (string | number) - The currently selected value - /// + ///  ///• style (record) - The style of the container (div) - /// + ///  ///• className (string) - The class of the container (div) - /// + ///  ///• inputStyle (record; default {}) - The style of the <input> radio element - /// + ///  ///• inputClassName (string; default ) - The class of the <input> radio element - /// + ///  ///• labelStyle (record; default {}) - The style of the <label> that wraps the radio input /// and the option's label - /// + ///  ///• labelClassName (string; default ) - The class of the <label> that wraps the radio input /// and the option's label - /// + ///  ///• loading_state (record with the fields: 'is_loading: boolean (optional)', 'prop_name: string (optional)', 'component_name: string (optional)') - Object that holds the loading state object coming from dash-renderer - /// + ///  ///• persistence (boolean | string | number) - Used to allow user interactions in this component to be persisted when ///the component - or the page - is refreshed. If `persisted` is truthy and ///hasn't changed from its previous value, a `value` that the user has ///changed while using the app will keep that change, as long as ///the new `value` also matches what was given originally. ///Used in conjunction with `persistence_type`. - /// + ///  ///• persisted_props (list with values of type: value equal to: 'value'; default ['value']) - Properties whose user interactions will persist after refreshing the ///component or the page. Since only `value` is allowed this prop can ///normally be ignored. - /// + ///  ///• persistence_type (value equal to: 'local', 'session', 'memory'; default local) - Where persisted user changes will be stored: ///memory: only kept in memory, reset on page refresh. ///local: window.localStorage, data is kept after the browser quit. diff --git a/Dash.NET.CSharp/CoreComponents/RangeSlider.fs b/Dash.NET.CSharp/CoreComponents/RangeSlider.fs index 570dff4..fa4089c 100644 --- a/Dash.NET.CSharp/CoreComponents/RangeSlider.fs +++ b/Dash.NET.CSharp/CoreComponents/RangeSlider.fs @@ -36,7 +36,7 @@ module RangeSlider = /// ///value equal to: 'left', 'right', 'top', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight' - /// + ///  ///Determines the placement of tooltips ///See https://github.com/react-component/tooltip#api ///top/bottom{*} sets the _origin_ of the tooltip, so e.g. `topLeft` @@ -317,57 +317,57 @@ module RangeSlider = /// ///A double slider with two handles. ///Used for specifying a range of numerical values. - /// + ///  ///Properties: - /// + ///  ///• id (string) - The ID of this component, used to identify dash components ///in callbacks. The ID needs to be unique across all of the ///components in an app. - /// + ///  ///• marks (dict with values of type: string | record with the fields: 'label: string (optional)', 'style: record (optional)') - Marks on the slider. ///The key determines the position (a number), ///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. - /// + ///  ///• value (list with values of type: number) - The value of the input - /// + ///  ///• drag_value (list with values of type: number) - The value of the input during a drag - /// + ///  ///• allowCross (boolean) - allowCross could be set as true to allow those handles to cross. - /// + ///  ///• className (string) - Additional CSS class for the root DOM node - /// + ///  ///• count (number) - Determine how many ranges to render, and multiple handles ///will be rendered (number + 1). - /// + ///  ///• disabled (boolean) - If true, the handles can't be moved. - /// + ///  ///• dots (boolean) - When the step value is greater than 1, ///you can set the dots to true if you want to ///render the slider with dots. - /// + ///  ///• included (boolean) - If the value is true, it means a continuous ///value is included. Otherwise, it is an independent value. - /// + ///  ///• min (number) - Minimum allowed value of the slider - /// + ///  ///• max (number) - Maximum allowed value of the slider - /// + ///  ///• pushable (boolean | number) - pushable could be set as true to allow pushing of ///surrounding handles when moving an handle. ///When set to a number, the number will be the ///minimum ensured distance between handles. - /// + ///  ///• tooltip (record with the fields: 'always_visible: boolean (optional)', 'placement: value equal to: 'left', 'right', 'top', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight' (optional)') - Configuration for tooltips describing the current slider values - /// + ///  ///• step (number) - Value by which increments or decrements are made - /// + ///  ///• vertical (boolean) - If true, the slider will be vertical - /// + ///  ///• verticalHeight (number; default 400) - The height, in px, of the slider if it is vertical. - /// + ///  ///• updatemode (value equal to: 'mouseup', 'drag'; default mouseup) - Determines when the component should update its `value` ///property. If `mouseup` (the default) then the slider ///will only trigger its value when the user has finished @@ -375,20 +375,20 @@ module RangeSlider = ///update its value continuously as it is being dragged. ///Note that for the latter case, the `drag_value` ///property could be used instead. - /// + ///  ///• loading_state (record with the fields: 'is_loading: boolean (optional)', 'prop_name: string (optional)', 'component_name: string (optional)') - Object that holds the loading state object coming from dash-renderer - /// + ///  ///• persistence (boolean | string | number) - Used to allow user interactions in this component to be persisted when ///the component - or the page - is refreshed. If `persisted` is truthy and ///hasn't changed from its previous value, a `value` that the user has ///changed while using the app will keep that change, as long as ///the new `value` also matches what was given originally. ///Used in conjunction with `persistence_type`. - /// + ///  ///• persisted_props (list with values of type: value equal to: 'value'; default ['value']) - Properties whose user interactions will persist after refreshing the ///component or the page. Since only `value` is allowed this prop can ///normally be ignored. - /// + ///  ///• persistence_type (value equal to: 'local', 'session', 'memory'; default local) - Where persisted user changes will be stored: ///memory: only kept in memory, reset on page refresh. ///local: window.localStorage, data is kept after the browser quit. diff --git a/Dash.NET.CSharp/CoreComponents/Slider.fs b/Dash.NET.CSharp/CoreComponents/Slider.fs index 0fef095..d480d4d 100644 --- a/Dash.NET.CSharp/CoreComponents/Slider.fs +++ b/Dash.NET.CSharp/CoreComponents/Slider.fs @@ -26,7 +26,7 @@ module Slider = /// ///value equal to: 'left', 'right', 'top', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight' - /// + ///  ///Determines the placement of tooltips ///See https://github.com/react-component/tooltip#api ///top/bottom{*} sets the _origin_ of the tooltip, so e.g. `topLeft` @@ -192,7 +192,7 @@ module Slider = /// static member loadingState(p: LoadingState) = guardAgainstNull "p" p - OAttr.loadingState (p |> LoadingState.Convert) |> Attr.Wrap + OAttr.loadingState (p |> LoadingState.Unwrap) |> Attr.Wrap /// ///Used to allow user interactions in this component to be persisted when ///the component - or the page - is refreshed. If `persisted` is truthy and @@ -269,47 +269,47 @@ module Slider = /// ///A slider component with a single handle. - /// + ///  ///Properties: - /// + ///  ///• id (string) - The ID of this component, used to identify dash components ///in callbacks. The ID needs to be unique across all of the ///components in an app. - /// + ///  ///• marks (dict with values of type: string | record with the fields: 'label: string (optional)', 'style: record (optional)') - Marks on the slider. ///The key determines the position (a number), ///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. - /// + ///  ///• value (number) - The value of the input - /// + ///  ///• drag_value (number) - The value of the input during a drag - /// + ///  ///• className (string) - Additional CSS class for the root DOM node - /// + ///  ///• disabled (boolean) - If true, the handles can't be moved. - /// + ///  ///• dots (boolean) - When the step value is greater than 1, ///you can set the dots to true if you want to ///render the slider with dots. - /// + ///  ///• included (boolean) - If the value is true, it means a continuous ///value is included. Otherwise, it is an independent value. - /// + ///  ///• min (number) - Minimum allowed value of the slider - /// + ///  ///• max (number) - Maximum allowed value of the slider - /// + ///  ///• tooltip (record with the fields: 'always_visible: boolean (optional)', 'placement: value equal to: 'left', 'right', 'top', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight' (optional)') - Configuration for tooltips describing the current slider value - /// + ///  ///• step (number) - Value by which increments or decrements are made - /// + ///  ///• vertical (boolean) - If true, the slider will be vertical - /// + ///  ///• verticalHeight (number; default 400) - The height, in px, of the slider if it is vertical. - /// + ///  ///• updatemode (value equal to: 'mouseup', 'drag'; default mouseup) - Determines when the component should update its `value` ///property. If `mouseup` (the default) then the slider ///will only trigger its value when the user has finished @@ -318,20 +318,20 @@ module Slider = ///If you want different actions during and after drag, ///leave `updatemode` as `mouseup` and use `drag_value` ///for the continuously updating value. - /// + ///  ///• loading_state (record with the fields: 'is_loading: boolean (optional)', 'prop_name: string (optional)', 'component_name: string (optional)') - Object that holds the loading state object coming from dash-renderer - /// + ///  ///• persistence (boolean | string | number) - Used to allow user interactions in this component to be persisted when ///the component - or the page - is refreshed. If `persisted` is truthy and ///hasn't changed from its previous value, a `value` that the user has ///changed while using the app will keep that change, as long as ///the new `value` also matches what was given originally. ///Used in conjunction with `persistence_type`. - /// + ///  ///• persisted_props (list with values of type: value equal to: 'value'; default ['value']) - Properties whose user interactions will persist after refreshing the ///component or the page. Since only `value` is allowed this prop can ///normally be ignored. - /// + ///  ///• persistence_type (value equal to: 'local', 'session', 'memory'; default local) - Where persisted user changes will be stored: ///memory: only kept in memory, reset on page refresh. ///local: window.localStorage, data is kept after the browser quit. diff --git a/Dash.NET.CSharp/CoreComponents/Store.fs b/Dash.NET.CSharp/CoreComponents/Store.fs index dea3d9f..f5e073d 100644 --- a/Dash.NET.CSharp/CoreComponents/Store.fs +++ b/Dash.NET.CSharp/CoreComponents/Store.fs @@ -100,22 +100,22 @@ module Store = ///The data is not inserted in the DOM. ///Data can be in memory, localStorage or sessionStorage. ///The data will be kept with the id as key. - /// + ///  ///Properties: - /// + ///  ///• id (string) - The ID of this component, used to identify dash components ///in callbacks. The ID needs to be unique across all of the ///components in an app. - /// + ///  ///• storage_type (value equal to: 'local', 'session', 'memory'; default memory) - The type of the web storage. ///memory: only kept in memory, reset on page refresh. ///local: window.localStorage, data is kept after the browser quit. ///session: window.sessionStorage, data is cleared once the browser quit. - /// + ///  ///• data (record | list | number | string | boolean) - The stored data for the id. - /// + ///  ///• clear_data (boolean; default false) - Set to true to remove the data contained in `data_key`. - /// + ///  ///• modified_timestamp (number; default -1) - The last time the storage was modified. /// let radioItems (id: string, [] attrs: array) = Dash.NET.DCC.Store.store id (attrs |> List.ofArray |> List.map Attr.Unwrap) |> Dash.NET.CSharp.Dsl.DashComponent.Wrap \ No newline at end of file diff --git a/Dash.NET.CSharp/CoreComponents/Tab.fs b/Dash.NET.CSharp/CoreComponents/Tab.fs index a1afd3d..b61417f 100644 --- a/Dash.NET.CSharp/CoreComponents/Tab.fs +++ b/Dash.NET.CSharp/CoreComponents/Tab.fs @@ -82,7 +82,7 @@ module Tab = /// static member loadingState(p: LoadingState) = guardAgainstNull "p" p - OAttr.loadingState (p |> LoadingState.Convert) |> Attr.Wrap + OAttr.loadingState (p |> LoadingState.Unwrap) |> Attr.Wrap /// ///The child or children of this dash component /// @@ -131,35 +131,35 @@ module Tab = /// ///Part of dcc.Tabs - this is the child Tab component used to render a tabbed page. ///Its children will be set as the content of that tab, which if clicked will become visible. - /// + ///  ///Properties: - /// + ///  ///• id (string) - The ID of this component, used to identify dash components ///in callbacks. The ID needs to be unique across all of the ///components in an app. - /// + ///  ///• label (string) - The tab's label - /// + ///  ///• children (a list of or a singular dash component, string or number) - The content of the tab - will only be displayed if this tab is selected - /// + ///  ///• value (string) - Value for determining which Tab is currently selected - /// + ///  ///• disabled (boolean; default false) - Determines if tab is disabled or not - defaults to false - /// + ///  ///• disabled_style (record; default { /// color: '#d6d6d6', ///}) - Overrides the default (inline) styles when disabled - /// + ///  ///• disabled_className (string) - Appends a class to the Tab component when it is disabled. - /// + ///  ///• className (string) - Appends a class to the Tab component. - /// + ///  ///• selected_className (string) - Appends a class to the Tab component when it is selected. - /// + ///  ///• style (record) - Overrides the default (inline) styles for the Tab component. - /// + ///  ///• selected_style (record) - Overrides the default (inline) styles for the Tab component when it is selected. - /// + ///  ///• loading_state (record with the fields: 'is_loading: boolean (optional)', 'prop_name: string (optional)', 'component_name: string (optional)') - Object that holds the loading state object coming from dash-renderer /// let tab (id: string, [] attrs: array) = Dash.NET.DCC.Tab.tab id (attrs |> List.ofArray |> List.map Attr.Unwrap) |> Dash.NET.CSharp.Dsl.DashComponent.Wrap \ No newline at end of file diff --git a/Dash.NET.CSharp/CoreComponents/Tabs.fs b/Dash.NET.CSharp/CoreComponents/Tabs.fs index 8b77053..aa49e31 100644 --- a/Dash.NET.CSharp/CoreComponents/Tabs.fs +++ b/Dash.NET.CSharp/CoreComponents/Tabs.fs @@ -89,13 +89,13 @@ module Tabs = /// static member colors(p: TabColors) = guardAgainstNull "p" p - OAttr.colors (p |> TabColors.Convert) + OAttr.colors (p |> TabColors.Unwrap) /// ///Object that holds the loading state object coming from dash-renderer /// static member loadingState(p: LoadingState) = guardAgainstNull "p" p - OAttr.loadingState (p |> LoadingState.Convert) + OAttr.loadingState (p |> LoadingState.Unwrap) /// ///Used to allow user interactions in this component to be persisted when @@ -177,33 +177,33 @@ module Tabs = ///A Dash component that lets you render pages with tabs - the Tabs component's children ///can be dcc.Tab components, which can hold a label that will be displayed as a tab, and can in turn hold ///children components that will be that tab's content. - /// + ///  ///Properties: - /// + ///  ///• id (string) - The ID of this component, used to identify dash components ///in callbacks. The ID needs to be unique across all of the ///components in an app. - /// + ///  ///• value (string) - The value of the currently selected Tab - /// + ///  ///• className (string) - Appends a class to the Tabs container holding the individual Tab components. - /// + ///  ///• content_className (string) - Appends a class to the Tab content container holding the children of the Tab that is selected. - /// + ///  ///• parent_className (string) - Appends a class to the top-level parent container holding both the Tabs container and the content container. - /// + ///  ///• style (record) - Appends (inline) styles to the Tabs container holding the individual Tab components. - /// + ///  ///• parent_style (record) - Appends (inline) styles to the top-level parent container holding both the Tabs container and the content container. - /// + ///  ///• content_style (record) - Appends (inline) styles to the tab content container holding the children of the Tab that is selected. - /// + ///  ///• vertical (boolean; default false) - Renders the tabs vertically (on the side) - /// + ///  ///• mobile_breakpoint (number; default 800) - Breakpoint at which tabs are rendered full width (can be 0 if you don't want full width tabs on mobile) - /// + ///  ///• children (list with values of type: a list of or a singular dash component, string or number | a list of or a singular dash component, string or number) - Array that holds Tab components - /// + ///  ///• colors (record with the fields: 'border: string (optional)', 'primary: string (optional)', 'background: string (optional)'; default { /// border: '#d6d6d6', /// primary: '#1975FA', @@ -214,20 +214,20 @@ module Tabs = /// primary: '#1975FA', /// background: '#f9f9f9' /// } - /// + ///  ///• loading_state (record with the fields: 'is_loading: boolean (optional)', 'prop_name: string (optional)', 'component_name: string (optional)') - Object that holds the loading state object coming from dash-renderer - /// + ///  ///• persistence (boolean | string | number) - Used to allow user interactions in this component to be persisted when ///the component - or the page - is refreshed. If `persisted` is truthy and ///hasn't changed from its previous value, a `value` that the user has ///changed while using the app will keep that change, as long as ///the new `value` also matches what was given originally. ///Used in conjunction with `persistence_type`. - /// + ///  ///• persisted_props (list with values of type: value equal to: 'value'; default ['value']) - Properties whose user interactions will persist after refreshing the ///component or the page. Since only `value` is allowed this prop can ///normally be ignored. - /// + ///  ///• persistence_type (value equal to: 'local', 'session', 'memory'; default local) - Where persisted user changes will be stored: ///memory: only kept in memory, reset on page refresh. ///local: window.localStorage, data is kept after the browser quit. diff --git a/Dash.NET.CSharp/CoreComponents/Upload.fs b/Dash.NET.CSharp/CoreComponents/Upload.fs index bbe9536..e9d2d5d 100644 --- a/Dash.NET.CSharp/CoreComponents/Upload.fs +++ b/Dash.NET.CSharp/CoreComponents/Upload.fs @@ -177,7 +177,7 @@ module Upload = /// static member loadingState(p: LoadingState) = guardAgainstNull "p" p - OAttr.loadingState (p |> LoadingState.Convert) |> Attr.Wrap + OAttr.loadingState (p |> LoadingState.Unwrap) |> Attr.Wrap /// ///The child or children of this dash component /// @@ -225,24 +225,24 @@ module Upload = /// ///Upload components allow your app to accept user-uploaded files via drag'n'drop - /// + ///  ///Properties: - /// + ///  ///• id (string) - The ID of this component, used to identify dash components ///in callbacks. The ID needs to be unique across all of the ///components in an app. - /// + ///  ///• contents (string | list with values of type: string) - The contents of the uploaded file as a binary string - /// + ///  ///• filename (string | list with values of type: string) - The name of the file(s) that was(were) uploaded. ///Note that this does not include the path of the file ///(for security reasons). - /// + ///  ///• last_modified (number | list with values of type: number) - The last modified date of the file that was uploaded in unix time ///(seconds since 1970). - /// + ///  ///• children (a list of or a singular dash component, string or number | string) - Contents of the upload component - /// + ///  ///• accept (string) - Allow specific types of files. ///See https://github.com/okonet/attr-accept for more information. ///Keep in mind that mime type determination is not reliable across @@ -250,43 +250,43 @@ module Upload = ///under macOS but as application/vnd.ms-excel under Windows. ///In some cases there might not be a mime type set at all. ///See: https://github.com/react-dropzone/react-dropzone/issues/276 - /// + ///  ///• disabled (boolean; default false) - Enable/disable the upload component entirely - /// + ///  ///• disable_click (boolean; default false) - Disallow clicking on the component to open the file dialog - /// + ///  ///• max_size (number; default -1) - Maximum file size in bytes. If `-1`, then infinite - /// + ///  ///• min_size (number; default 0) - Minimum file size in bytes - /// + ///  ///• multiple (boolean; default false) - Allow dropping multiple files - /// + ///  ///• className (string) - HTML class name of the component - /// + ///  ///• className_active (string) - HTML class name of the component while active - /// + ///  ///• className_reject (string) - HTML class name of the component if rejected - /// + ///  ///• className_disabled (string) - HTML class name of the component if disabled - /// + ///  ///• style (record; default {}) - CSS styles to apply - /// + ///  ///• style_active (record; default { /// borderStyle: 'solid', /// borderColor: '#6c6', /// backgroundColor: '#eee', ///}) - CSS styles to apply while active - /// + ///  ///• style_reject (record; default { /// borderStyle: 'solid', /// borderColor: '#c66', /// backgroundColor: '#eee', ///}) - CSS styles if rejected - /// + ///  ///• style_disabled (record; default { /// opacity: 0.5, ///}) - CSS styles if disabled - /// + ///  ///• loading_state (record with the fields: 'is_loading: boolean (optional)', 'prop_name: string (optional)', 'component_name: string (optional)') - Object that holds the loading state object coming from dash-renderer /// let upload (id: string, [] attrs: array) = Dash.NET.DCC.Upload.upload id (attrs |> List.ofArray |> List.map Attr.Unwrap) |> Dash.NET.CSharp.Dsl.DashComponent.Wrap \ No newline at end of file diff --git a/Dash.NET.CSharp/Interop.fs b/Dash.NET.CSharp/Interop.fs index 4d9b19c..cb3945a 100644 --- a/Dash.NET.CSharp/Interop.fs +++ b/Dash.NET.CSharp/Interop.fs @@ -7,4 +7,3 @@ let raiseNullArg (name : string) (message : string) = new System.ArgumentNullExc let guardAgainstNull name value = if isNull (box value) then raiseNullArg name "Nulls not allowed in Dash.NET.CSharp library functions" - diff --git a/Dash.NET.Giraffe.CSharp.Example/CallbacksExample.cs b/Dash.NET.Giraffe.CSharp.Example/CallbacksExample.cs index 514833f..9a0a076 100644 --- a/Dash.NET.Giraffe.CSharp.Example/CallbacksExample.cs +++ b/Dash.NET.Giraffe.CSharp.Example/CallbacksExample.cs @@ -62,9 +62,9 @@ internal static DashComponent CallbacksHtml() Dropdown.dropdown( "testInput1", Dropdown.Attr.options( - DropdownOption.Init("1", "1"), - DropdownOption.Init(2, 2), - DropdownOption.Init(3L, 3L), + DropdownOption.Init(1.0, 1.0), + DropdownOption.Init(2.0, 2.0), + DropdownOption.Init(3.0, 3.0), DropdownOption.Init(4.1, 4.1) ), Dropdown.Attr.multi(true) diff --git a/Dash.NET.Giraffe.CSharp.Tests/BasicCallback/Callback_BasicInput.cs b/Dash.NET.Giraffe.CSharp.Tests/BasicCallback/Callback_BasicInput.cs new file mode 100644 index 0000000..693f423 --- /dev/null +++ b/Dash.NET.Giraffe.CSharp.Tests/BasicCallback/Callback_BasicInput.cs @@ -0,0 +1,70 @@ +using System; +using Dash.NET.CSharp.DCC; +using Microsoft.Extensions.Logging; +using static Dash.NET.CSharp.Dsl; +using Dash.NET.CSharp.Giraffe; +using Dash.NET.CSharp; + +namespace Documentation.Examples +{ + class Callback_BasicInput + { + public static void RunExample() + { + var layout = + Html.div( + Attr.children( + Input.input( + id: "input-1", + Input.Attr.inputType(InputType.Text()), + Input.Attr.value("Montreal") + ), + Input.input( + id: "input-2", + Input.Attr.inputType(InputType.Text()), + Input.Attr.value("Canada") + ), + Html.div(Attr.id("output-state")) + ) + ); + var setOutputDivValue = + Callback.Create( + input: new[] + { + ("input-1", ComponentProperty.Value), + ("input-2", ComponentProperty.Value) + }, + output: new[] + { + ("output-state", ComponentProperty.Children) + }, + handler: (string input1, string input2) => + { + return new[] + { + CallbackResult.Create(("output-state", ComponentProperty.Children), ("Input 1 is " + input1 + ", Input 2 is " + input2)) + }; + }, + preventInitialCall: false + ); + + var dashApp = DashApp + .initDefault() + .withLayout(layout) + .addCallback(setOutputDivValue); + + var config = new DashGiraffeConfig( + hostName: "localhost", + logLevel: LogLevel.Information, + ipAddress: "*", + port: 8050, + errorHandler: (Exception err) => err.Message + ); + + dashApp.run( + args: new string[] { }, + config + ); + } + } +} diff --git a/Dash.NET.Giraffe.CSharp.Tests/BasicCallback/Callback_BasicState.cs b/Dash.NET.Giraffe.CSharp.Tests/BasicCallback/Callback_BasicState.cs new file mode 100644 index 0000000..2bc3c32 --- /dev/null +++ b/Dash.NET.Giraffe.CSharp.Tests/BasicCallback/Callback_BasicState.cs @@ -0,0 +1,80 @@ +using System; +using Dash.NET.CSharp.DCC; +using Microsoft.Extensions.Logging; +using static Dash.NET.CSharp.Dsl; +using Dash.NET.CSharp.Giraffe; +using Dash.NET.CSharp; + +namespace Documentation.Examples +{ + class Callback_BasicState + { + public static void RunExample() + { + var layout = + Html.div( + Attr.children( + Input.input( + id: "input-1-state", + Input.Attr.inputType(InputType.Text()), + Input.Attr.value("Montreal") + ), + Input.input( + id: "input-2-state", + Input.Attr.inputType(InputType.Text()), + Input.Attr.value("Canada") + ), + Html.button( + Attr.id("submit-button-state"), + Attr.n_clicks(0), + Attr.children("Submit") + ), + Html.div(Attr.id("output-state")) + ) + ); + + var setOutputDivValue = + Callback.Create( + input: new[] + { + ("submit-button-state", ComponentProperty.CustomProperty("n_clicks")) + }, + output: new[] + { + ("output-state", ComponentProperty.Children) + }, + handler: (int nClicks, string input1, string input2) => + { + return new[] + { + CallbackResult.Create(("output-state", ComponentProperty.Children), ("The button has been pressed " + nClicks + " times, Input 1 is " + input1 + ", Input 2 is " + input2)) + }; + }, + state: new[] + { + ("input-1-state", ComponentProperty.Value), + ("input-2-state", ComponentProperty.Value) + }, + preventInitialCall: false + ); + + var dashApp = DashApp + .initDefault() + .withLayout(layout) + .addCallback(setOutputDivValue); + + var config = new DashGiraffeConfig( + hostName: "localhost", + logLevel: LogLevel.Information, + ipAddress: "127.0.0.1", + port: 8050, + errorHandler: (Exception err) => err.Message + ); + + dashApp.run( + args: new string[] { }, + config + ); + } + } +} diff --git a/Dash.NET.Giraffe.CSharp.Tests/BasicCallback/Callback_CallbackChain.cs b/Dash.NET.Giraffe.CSharp.Tests/BasicCallback/Callback_CallbackChain.cs new file mode 100644 index 0000000..a15f2ad --- /dev/null +++ b/Dash.NET.Giraffe.CSharp.Tests/BasicCallback/Callback_CallbackChain.cs @@ -0,0 +1,130 @@ +using System; +using Microsoft.Extensions.Logging; +using static Dash.NET.CSharp.Dsl; +using Dash.NET.CSharp.Giraffe; +using Dash.NET.CSharp.DCC; +using Dash.NET.CSharp; +using System.Collections.Generic; +using System.Linq; + +namespace Documentation.Examples +{ + class Callback_CallbackChain + { + class Country + { + public string name { get; set; } + public string[] cities { get; set; } + } + + public static void RunExample() + { + var countries = new List() + { + new Country() { name = "America", cities = new string[] { "New York City", "San Francisco", "Cincinnati" } }, + new Country() { name = "Canada", cities = new string[] { "Montreal", "Toronto", "Ottawa" } } + }; + + var layout = + Html.div( + Attr.children( + RadioItems.radioItems( + id: "countries-radio", + RadioItems.Attr.options(countries.Select(x => RadioItemsOption.Init(label: x.name, value: x.name, disabled: false))), + RadioItems.Attr.value("America") + ), + Html.hr(), + RadioItems.radioItems(id: "cities-radio"), + Html.hr(), + Html.div(Attr.id("display-selected-values")) + ) + ); + + var setCitiesOption = + Callback.Create( + input: new[] + { + ("countries-radio", ComponentProperty.Value) + }, + output: new[] + { + ("cities-radio", ComponentProperty.CustomProperty("options")) + }, + handler: (string selectedCountry) => + { + var radioItemsOptionArr = countries + .Where(x => x.name == selectedCountry) + .First() + .cities + .Select(x => RadioItemsOption.Init(label: x, value: x)) + .ToArray(); + + return new[] + { + CallbackResult.Create(("cities-radio", ComponentProperty.CustomProperty("options")), radioItemsOptionArr) + }; + }, + preventInitialCall: false + ); + + var setCitiesValue = + Callback.Create( + input: new[] + { + ("cities-radio", ComponentProperty.CustomProperty("options")), + }, + output: new[] + { + ("cities-radio", ComponentProperty.Value) + }, + handler: (RadioItemsOption[] radioItemOptions) => + { + return new[] + { + CallbackResult.Create(("cities-radio", ComponentProperty.Value), radioItemOptions[0].value) + }; + } + ); + + var setDisplayChildren = + Callback.Create( + input: new[] + { + ("countries-radio", ComponentProperty.Value), + ("cities-radio", ComponentProperty.Value) + }, + output: new[] + { + ("display-selected-values", ComponentProperty.Children) + }, + handler: (string selectedCountry, string selectedCity) => + { + return new[] + { + CallbackResult.Create(("display-selected-values", ComponentProperty.Children), $"{selectedCity} is a city in {selectedCountry}") + }; + } + ); + + var dashApp = DashApp + .initDefault() + .withLayout(layout) + .addCallback(setCitiesOption) + .addCallback(setCitiesValue) + .addCallback(setDisplayChildren); + + var config = new DashGiraffeConfig( + hostName: "localhost", + logLevel: LogLevel.Information, + ipAddress: "127.0.0.1", + port: 8050, + errorHandler: (Exception err) => err.Message + ); + + dashApp.run( + args: new string[] { }, + config + ); + } + } +} diff --git a/Dash.NET.Giraffe.CSharp.Tests/Callback_MultiInputs.cs b/Dash.NET.Giraffe.CSharp.Tests/BasicCallback/Callback_MultiInputs.cs similarity index 97% rename from Dash.NET.Giraffe.CSharp.Tests/Callback_MultiInputs.cs rename to Dash.NET.Giraffe.CSharp.Tests/BasicCallback/Callback_MultiInputs.cs index 771ebb1..33144de 100644 --- a/Dash.NET.Giraffe.CSharp.Tests/Callback_MultiInputs.cs +++ b/Dash.NET.Giraffe.CSharp.Tests/BasicCallback/Callback_MultiInputs.cs @@ -7,7 +7,6 @@ using Dash.NET.CSharp; using CsvHelper.Configuration.Attributes; using CsvHelper; -using CsvHelper.TypeConversion; using System.IO; using System.Net.Http; using System.Globalization; @@ -29,8 +28,8 @@ class CountryIndicator [Index(2)] public int year { get; set; } [Index(3)] - [Default("0")] - [NumberStyles(NumberStyles.Number | NumberStyles.AllowExponent)] //Handle values in scientific notation + [Default(0)] + [NumberStyles(NumberStyles.Number | NumberStyles.AllowExponent)] public decimal value { get; set; } } public static void RunExample() @@ -38,12 +37,13 @@ public static void RunExample() var csvUrl = "https://plotly.github.io/datasets/country_indicators.csv"; var csv= new StreamReader(new HttpClient().GetStreamAsync(csvUrl).Result); var rows = new CsvReader(csv, CultureInfo.InvariantCulture).GetRecords().ToList(); + var available_indicators = rows.GroupBy(x => x.indicator).Select(x => x.First().indicator).ToList(); Func scatterPlot = (string xaxisColumnName, string yaxisColumnName, string xaxisType, string yaxisType, int year) => { - var filteredRows = rows.Where(x => x.year == year/* && x.value != 0*/); + var filteredRows = rows.Where(x => x.year == year); var xData = filteredRows.Where(x => x.indicator == xaxisColumnName).Select(x => x.value); var yData = filteredRows.Where(x => x.indicator == yaxisColumnName).Select(x => x.value); var countryData = filteredRows.Select(x => x.country).ToArray(); @@ -165,8 +165,8 @@ public static void RunExample() var config = new DashGiraffeConfig( hostName: "localhost", logLevel: LogLevel.Information, - ipAddress: "*", - port: 8000, + ipAddress: "127.0.0.1", + port: 8050, errorHandler: (Exception err) => err.Message ); diff --git a/Dash.NET.Giraffe.CSharp.Tests/BasicCallback/Callback_MultiOutputs.cs b/Dash.NET.Giraffe.CSharp.Tests/BasicCallback/Callback_MultiOutputs.cs new file mode 100644 index 0000000..60f68ff --- /dev/null +++ b/Dash.NET.Giraffe.CSharp.Tests/BasicCallback/Callback_MultiOutputs.cs @@ -0,0 +1,108 @@ +using System; +using Microsoft.Extensions.Logging; +using static Dash.NET.CSharp.Dsl; +using Dash.NET.CSharp.Giraffe; +using Dash.NET.CSharp.DCC; +using Dash.NET.CSharp; + +namespace Documentation.Examples +{ + class Callback_MultiOutputs + { + public static void RunExample() + { + var layout = + Html.div( + Attr.children( + Input.input( + id: "num-multi", + Input.Attr.inputType(InputType.Number()), + Input.Attr.value(5) + ), + Html.table( + Attr.children( + Html.tr( + Attr.children( + Html.td(Attr.children(Html.text("x"), Html.sup(Attr.children(2)))), + Html.td(Attr.id("square")) + ) + ), + Html.tr( + Attr.children( + Html.td(Attr.children(Html.text("x"), Html.sup(Attr.children(3)))), + Html.td(Attr.id("cube")) + ) + ), + Html.tr( + Attr.children( + Html.td(Attr.children(Html.text(2), Html.sup(Attr.children("x")))), + Html.td(Attr.id("twos")) + ) + ), + Html.tr( + Attr.children( + Html.td(Attr.children(Html.text(3), Html.sup(Attr.children("x")))), + Html.td(Attr.id("threes")) + ) + ), + Html.tr( + Attr.children( + Html.td(Attr.children(Html.text("x"), Html.sup(Attr.children("x")))), + Html.td(Attr.id("x^x")) + ) + ) + ) + ) + ) + ); + + var updateOutputTableCallback = + Callback.Create( + input: new[] + { + ("num-multi", ComponentProperty.Value) + }, + output: new[] + { + ("square", ComponentProperty.Children), + ("cube", ComponentProperty.Children), + ("twos", ComponentProperty.Children), + ("threes", ComponentProperty.Children), + ("x^x", ComponentProperty.Children) + }, + handler: (string inputValue) => + { + var inputNumber = Double.Parse(inputValue); + return new[] + { + CallbackResult.Create(("square", ComponentProperty.Children), Math.Pow(inputNumber, 2)), + CallbackResult.Create(("cube", ComponentProperty.Children), Math.Pow(inputNumber, 3)), + CallbackResult.Create(("twos", ComponentProperty.Children), Math.Pow(2, inputNumber)), + CallbackResult.Create(("threes", ComponentProperty.Children), Math.Pow(3, inputNumber)), + CallbackResult.Create(("x^x", ComponentProperty.Children), Math.Pow(inputNumber, inputNumber)) + + }; + }, + preventInitialCall: false + ); + + var dashApp = DashApp + .initDefault() + .withLayout(layout) + .addCallback(updateOutputTableCallback); + + var config = new DashGiraffeConfig( + hostName: "localhost", + logLevel: LogLevel.Information, + ipAddress: "127.0.0.1", + port: 8050, + errorHandler: (Exception err) => err.Message + ); + + dashApp.run( + args: new string[] { }, + config + ); + } + } +} diff --git a/Dash.NET.Giraffe.CSharp.Tests/Callback_SimpleCallback.cs b/Dash.NET.Giraffe.CSharp.Tests/BasicCallback/Callback_SimpleCallback.cs similarity index 94% rename from Dash.NET.Giraffe.CSharp.Tests/Callback_SimpleCallback.cs rename to Dash.NET.Giraffe.CSharp.Tests/BasicCallback/Callback_SimpleCallback.cs index b5b3f25..9ac6b25 100644 --- a/Dash.NET.Giraffe.CSharp.Tests/Callback_SimpleCallback.cs +++ b/Dash.NET.Giraffe.CSharp.Tests/BasicCallback/Callback_SimpleCallback.cs @@ -33,7 +33,7 @@ public static void RunExample() ) ) ); - + var updateOutputDivCallback = Callback.Create( input: new[] @@ -61,9 +61,9 @@ public static void RunExample() var config = new DashGiraffeConfig( hostName: "localhost", - logLevel: LogLevel.Debug, - ipAddress: "*", - port: 8000, + logLevel: LogLevel.Information, + ipAddress: "127.0.0.1", + port: 8050, errorHandler: (Exception err) => err.Message ); diff --git a/Dash.NET.Giraffe.CSharp.Tests/Callback_SimpleSlider.cs b/Dash.NET.Giraffe.CSharp.Tests/BasicCallback/Callback_SimpleSlider.cs similarity index 89% rename from Dash.NET.Giraffe.CSharp.Tests/Callback_SimpleSlider.cs rename to Dash.NET.Giraffe.CSharp.Tests/BasicCallback/Callback_SimpleSlider.cs index ab835d3..3130420 100644 --- a/Dash.NET.Giraffe.CSharp.Tests/Callback_SimpleSlider.cs +++ b/Dash.NET.Giraffe.CSharp.Tests/BasicCallback/Callback_SimpleSlider.cs @@ -41,6 +41,7 @@ public static void RunExample() (int year) => { var filteredRows = rows.Where(x => x.year == year); + var labels = filteredRows.Select(x => "
continent=" + x.continent + @@ -62,8 +63,10 @@ public static void RunExample() ) .WithYAxis( Plotly.NET.LayoutObjects.LinearAxis.init(Title: Title.init("Life expectancy")) - ); + ); + var fig = GenericChart.toFigure(chart); + return fig; }; @@ -77,8 +80,10 @@ public static void RunExample() Slider.Attr.max(rows.Select(x => x.year).Max()), Slider.Attr.value(rows.Select(x => x.year).Min()), Slider.Attr.marks( - rows.GroupBy(x => x.year).Select(x => x.First()).ToDictionary( - x => Convert.ToDouble(x.year), x => Slider.Mark.Value(x.year.ToString()) + rows + .GroupBy(x => x.year) + .Select(x => x.First()) + .ToDictionary(x => Convert.ToDouble(x.year), x => Slider.Mark.Value(x.year.ToString()) ) ), Slider.Attr.step(5) @@ -104,7 +109,7 @@ public static void RunExample() CallbackResult.Create(("graph-with-slider", ComponentProperty.CustomProperty("figure")), bubbleChart(inputYear)) }; }, - preventInitialCall: false //I added this so when the page is loaded for the first time, there's a loaded chart displayed. For some reason this line isn't on the F# docs + preventInitialCall: false ); var dashApp = DashApp @@ -114,9 +119,9 @@ public static void RunExample() var config = new DashGiraffeConfig( hostName: "localhost", - logLevel: LogLevel.Debug, - ipAddress: "*", - port: 8000, + logLevel: LogLevel.Information, + ipAddress: "127.0.0.1", + port: 8050, errorHandler: (Exception err) => err.Message ); diff --git a/Dash.NET.Giraffe.CSharp.Tests/CoreComponents/Clipboard/Clipboard_ClipboardTextarea.cs b/Dash.NET.Giraffe.CSharp.Tests/CoreComponents/Clipboard/Clipboard_ClipboardTextarea.cs new file mode 100644 index 0000000..dbf2975 --- /dev/null +++ b/Dash.NET.Giraffe.CSharp.Tests/CoreComponents/Clipboard/Clipboard_ClipboardTextarea.cs @@ -0,0 +1,42 @@ +using System; +using Dash.NET.CSharp.Giraffe; +using Microsoft.Extensions.Logging; +using Dash.NET.CSharp.DCC; +using static Dash.NET.CSharp.Dsl; +using System.Collections.Generic; +using System.Linq; +using System.Text; +using System.Threading.Tasks; + +namespace Documentation.Examples +{ + class Clipboard_ClipboardTextarea + { + public static void RunExample() + { + var layout = + Html.div( + Attr.children( + //There's no clipboard CoreComponent yet + ) + ); + + var dashApp = DashApp + .initDefault() + .withLayout(layout); + + var config = new DashGiraffeConfig( + hostName: "localhost", + logLevel: LogLevel.Information, + ipAddress: "127.0.0.1", + port: 8050, + errorHandler: (Exception err) => err.Message + ); + + dashApp.run( + args: new string[] { }, + config + ); + } + } +} diff --git a/Dash.NET.Giraffe.CSharp.Tests/CoreComponents/Dropdown/Dropdown_Dropdown.cs b/Dash.NET.Giraffe.CSharp.Tests/CoreComponents/Dropdown/Dropdown_Dropdown.cs new file mode 100644 index 0000000..95b8f75 --- /dev/null +++ b/Dash.NET.Giraffe.CSharp.Tests/CoreComponents/Dropdown/Dropdown_Dropdown.cs @@ -0,0 +1,69 @@ +using System; +using Dash.NET.CSharp.Giraffe; +using Dash.NET.CSharp.DCC; +using static Dash.NET.CSharp.Dsl; +using Microsoft.Extensions.Logging; +using Dash.NET.CSharp; + +namespace Documentation.Examples +{ + class Dropdown_Dropdown + { + public static void RunExample() + { + var layout = + Html.div( + Attr.children( + Dropdown.dropdown( + id: "demo-dropdown", + Dropdown.Attr.options( + DropdownOption.Init(label: "New York City", value: "NYC", disabled: false, title: "New York City"), + DropdownOption.Init(label: "Montreal", value: "MTL", disabled: false, title: "Montreal"), + DropdownOption.Init(label: "San Francisco", value: "SF", disabled: false, title: "San Francisco") + ), + Dropdown.Attr.value("NYC") + ), + Html.div(Attr.id("dd-output-container")) + ) + ); + + var changeTextCallback = + Callback.Create( + input: new[] + { + ("demo-dropdown", ComponentProperty.Value) + }, + output: new[] + { + ("dd-output-container", ComponentProperty.Children) + }, + handler: (string dval) => + { + return new[] + { + CallbackResult.Create(("dd-output-container", ComponentProperty.Children), "You have selected " + dval) + }; + }, + preventInitialCall: false + ); + + var dashApp = DashApp + .initDefault() + .withLayout(layout) + .addCallback(changeTextCallback); + + var config = new DashGiraffeConfig( + hostName: "localhost", + logLevel: LogLevel.Information, + ipAddress: "127.0.0.1", + port: 8050, + errorHandler: (Exception err) => err.Message + ); + + dashApp.run( + args: new string[] { }, + config + ); + } + } +} diff --git a/Dash.NET.Giraffe.CSharp.Tests/CoreComponents/Dropdown/Dropdown_DropdownClearable.cs b/Dash.NET.Giraffe.CSharp.Tests/CoreComponents/Dropdown/Dropdown_DropdownClearable.cs new file mode 100644 index 0000000..d5cf7a1 --- /dev/null +++ b/Dash.NET.Giraffe.CSharp.Tests/CoreComponents/Dropdown/Dropdown_DropdownClearable.cs @@ -0,0 +1,47 @@ +using System; +using Dash.NET.CSharp.Giraffe; +using Dash.NET.CSharp.DCC; +using static Dash.NET.CSharp.Dsl; +using Microsoft.Extensions.Logging; + +namespace Documentation.Examples +{ + class Dropdown_DropdownClearable + { + public static void RunExample() + { + var layout = + Html.div( + Attr.children( + Dropdown.dropdown( + id: "demo-dropdown", + Dropdown.Attr.options( + DropdownOption.Init(label: "New York City", value: "NYC", disabled: false, title: "New York City"), + DropdownOption.Init(label: "Montreal", value: "MTL", disabled: false, title: "Montreal"), + DropdownOption.Init(label: "San Francisco", value: "SF", disabled: false, title: "San Francisco") + ), + Dropdown.Attr.value("MTL"), + Dropdown.Attr.clearable(false) + ) + ) + ); + + var dashApp = DashApp + .initDefault() + .withLayout(layout); + + var config = new DashGiraffeConfig( + hostName: "localhost", + logLevel: LogLevel.Information, + ipAddress: "127.0.0.1", + port: 8050, + errorHandler: (Exception err) => err.Message + ); + + dashApp.run( + args: new string[] { }, + config + ); + } + } +} diff --git a/Dash.NET.Giraffe.CSharp.Tests/CoreComponents/Dropdown/Dropdown_DropdownDisableOptions.cs b/Dash.NET.Giraffe.CSharp.Tests/CoreComponents/Dropdown/Dropdown_DropdownDisableOptions.cs new file mode 100644 index 0000000..503bd10 --- /dev/null +++ b/Dash.NET.Giraffe.CSharp.Tests/CoreComponents/Dropdown/Dropdown_DropdownDisableOptions.cs @@ -0,0 +1,46 @@ +using System; +using Dash.NET.CSharp.Giraffe; +using Dash.NET.CSharp.DCC; +using static Dash.NET.CSharp.Dsl; +using Microsoft.Extensions.Logging; + +namespace Documentation.Examples +{ + class Dropdown_DropdownDisableOptions + { + public static void RunExample() + { + var layout = + Html.div( + Attr.children( + Dropdown.dropdown( + id: "demo-dropdown", + Dropdown.Attr.options( + DropdownOption.Init(label: "New York City", value: "NYC", disabled: false, title: "New York City"), + DropdownOption.Init(label: "Montreal", value: "MTL", disabled: false, title: "Montreal"), + DropdownOption.Init(label: "San Francisco", value: "SF", disabled: false, title: "San Francisco") + ), + Dropdown.Attr.disabled(true) + ) + ) + ); + + var dashApp = DashApp + .initDefault() + .withLayout(layout); + + var config = new DashGiraffeConfig( + hostName: "localhost", + logLevel: LogLevel.Information, + ipAddress: "127.0.0.1", + port: 8050, + errorHandler: (Exception err) => err.Message + ); + + dashApp.run( + args: new string[] { }, + config + ); + } + } +} diff --git a/Dash.NET.Giraffe.CSharp.Tests/CoreComponents/Dropdown/Dropdown_DropdownDisableSearch.cs b/Dash.NET.Giraffe.CSharp.Tests/CoreComponents/Dropdown/Dropdown_DropdownDisableSearch.cs new file mode 100644 index 0000000..561bbb3 --- /dev/null +++ b/Dash.NET.Giraffe.CSharp.Tests/CoreComponents/Dropdown/Dropdown_DropdownDisableSearch.cs @@ -0,0 +1,49 @@ +using System; +using System.Collections.Generic; +using Dash.NET.CSharp.Giraffe; +using Dash.NET.CSharp.DCC; +using static Dash.NET.CSharp.Dsl; +using Plotly.NET; +using Microsoft.Extensions.Logging; +using Dash.NET.CSharp; + +namespace Documentation.Examples +{ + class Dropdown_DropdownDisableSearch + { + public static void RunExample() + { + var layout = + Html.div( + Attr.children( + Dropdown.dropdown( + id: "demo-dropdown", + Dropdown.Attr.options( + DropdownOption.Init(label: "New York City", value: "NYC", disabled: false, title: "New York City"), + DropdownOption.Init(label: "Montreal", value: "MTL", disabled: false, title: "Montreal"), + DropdownOption.Init(label: "San Francisco", value: "SF", disabled: false, title: "San Francisco") + ), + Dropdown.Attr.searchable(false) + ) + ) + ); + + var dashApp = DashApp + .initDefault() + .withLayout(layout); + + var config = new DashGiraffeConfig( + hostName: "localhost", + logLevel: LogLevel.Information, + ipAddress: "127.0.0.1", + port: 8050, + errorHandler: (Exception err) => err.Message + ); + + dashApp.run( + args: new string[] { }, + config + ); + } + } +} diff --git a/Dash.NET.Giraffe.CSharp.Tests/CoreComponents/Dropdown/Dropdown_DropdownDynamicOptions.cs b/Dash.NET.Giraffe.CSharp.Tests/CoreComponents/Dropdown/Dropdown_DropdownDynamicOptions.cs new file mode 100644 index 0000000..2ec75b1 --- /dev/null +++ b/Dash.NET.Giraffe.CSharp.Tests/CoreComponents/Dropdown/Dropdown_DropdownDynamicOptions.cs @@ -0,0 +1,115 @@ +using System; +using Dash.NET.CSharp.Giraffe; +using Dash.NET.CSharp.DCC; +using static Dash.NET.CSharp.Dsl; +using Microsoft.Extensions.Logging; +using Dash.NET.CSharp; +using System.Linq; + +namespace Documentation.Examples +{ + class Dropdown_DropdownDynamicOptions + { + public static void RunExample() + { + var options = new DropdownOption[] + { + DropdownOption.Init(label: "New York City", value: "NYC", disabled: false, title: "New York City"), + DropdownOption.Init(label: "Montreal", value: "MTL", disabled: false, title: "Montreal"), + DropdownOption.Init(label: "San Francisco", value: "SF", disabled: false, title: "San Francisco") + }; + + var layout = + Html.div( + Attr.children( + Html.div( + Attr.children( + Html.text("Single dynamic Dropdown"), + Dropdown.dropdown( + id: "my-dynamic-dropdown", + Dropdown.Attr.searchable(true), + Dropdown.Attr.searchValue(""), + Dropdown.Attr.options() + ) + ) + ), + Html.div( + Attr.children( + Html.text("Multi dynamic Dropdown"), + Dropdown.dropdown( + id: "my-multi-dynamic-dropdown", + Dropdown.Attr.searchable(true), + Dropdown.Attr.searchValue(""), + Dropdown.Attr.options(), + Dropdown.Attr.value(""), + Dropdown.Attr.multi(true) + ) + ) + ) + ) + ); + + var updateOptionsCallback = + Callback.Create( + input: new[] + { + ("my-dynamic-dropdown", ComponentProperty.CustomProperty("search_value")) + }, + output: new[] + { + ("my-dynamic-dropdown", ComponentProperty.CustomProperty("options")) + }, + handler: (string sval) => + { + return new[] + { + CallbackResult.Create(("my-dynamic-dropdown", ComponentProperty.CustomProperty("options")), options.Where(x => x.label.Contains(sval) && sval != "")) + }; + }, + preventInitialCall: false + ); + + var updateMultiOptionsCallback = + Callback.Create( + input: new[] + { + ("my-multi-dynamic-dropdown", ComponentProperty.CustomProperty("search_value")), + ("my-multi-dynamic-dropdown", ComponentProperty.CustomProperty("value")) + + }, + output: new[] + { + ("my-multi-dynamic-dropdown", ComponentProperty.CustomProperty("options")) + }, + handler: (string sval, string[] dval) => + { + var optionsResult = options.Where(x => (x.label.Contains(sval) && sval != "") || (dval != null && dval.Contains(x.value))); + return new[] + { + CallbackResult.Create(("my-multi-dynamic-dropdown", ComponentProperty.CustomProperty("options")), optionsResult) + }; + }, + preventInitialCall: false + ); + + var dashApp = DashApp + .initDefault() + .withLayout(layout) + .addCallback(updateOptionsCallback) + .addCallback(updateMultiOptionsCallback); + + var config = new DashGiraffeConfig( + hostName: "localhost", + logLevel: LogLevel.Information, + ipAddress: "127.0.0.1", + port: 8050, + errorHandler: (Exception err) => err.Message + ); + + dashApp.run( + args: new string[] { }, + config + ); + } + } +} diff --git a/Dash.NET.Giraffe.CSharp.Tests/CoreComponents/Dropdown/Dropdown_DropdownMultiValue.cs b/Dash.NET.Giraffe.CSharp.Tests/CoreComponents/Dropdown/Dropdown_DropdownMultiValue.cs new file mode 100644 index 0000000..afd36d8 --- /dev/null +++ b/Dash.NET.Giraffe.CSharp.Tests/CoreComponents/Dropdown/Dropdown_DropdownMultiValue.cs @@ -0,0 +1,50 @@ +using System; +using System.Collections.Generic; +using Dash.NET.CSharp.Giraffe; +using Dash.NET.CSharp.DCC; +using static Dash.NET.CSharp.Dsl; +using Plotly.NET; +using Microsoft.Extensions.Logging; +using Dash.NET.CSharp; + +namespace Documentation.Examples +{ + class Dropdown_DropdownMultiValue + { + public static void RunExample() + { + var layout = + Html.div( + Attr.children( + Dropdown.dropdown( + id: "demo-dropdown", + Dropdown.Attr.options( + DropdownOption.Init(label: "New York City", value: "NYC", disabled: false, title: "New York City"), + DropdownOption.Init(label: "Montreal", value: "MTL", disabled: false, title: "Montreal"), + DropdownOption.Init(label: "San Francisco", value: "SF", disabled: false, title: "San Francisco") + ), + Dropdown.Attr.value("MTL", "NYC"), + Dropdown.Attr.multi(true) + ) + ) + ); + + var dashApp = DashApp + .initDefault() + .withLayout(layout); + + var config = new DashGiraffeConfig( + hostName: "localhost", + logLevel: LogLevel.Information, + ipAddress: "127.0.0.1", + port: 8050, + errorHandler: (Exception err) => err.Message + ); + + dashApp.run( + args: new string[] { }, + config + ); + } + } +} diff --git a/Dash.NET.Giraffe.CSharp.Tests/CoreComponents/Dropdown/Dropdown_DropdownPlaceholder.cs b/Dash.NET.Giraffe.CSharp.Tests/CoreComponents/Dropdown/Dropdown_DropdownPlaceholder.cs new file mode 100644 index 0000000..5f76ee9 --- /dev/null +++ b/Dash.NET.Giraffe.CSharp.Tests/CoreComponents/Dropdown/Dropdown_DropdownPlaceholder.cs @@ -0,0 +1,46 @@ +using System; +using Dash.NET.CSharp.Giraffe; +using Dash.NET.CSharp.DCC; +using static Dash.NET.CSharp.Dsl; +using Microsoft.Extensions.Logging; + +namespace Documentation.Examples +{ + class Dropdown_DropdownPlaceholder + { + public static void RunExample() + { + var layout = + Html.div( + Attr.children( + Dropdown.dropdown( + id: "demo-dropdown", + Dropdown.Attr.options( + DropdownOption.Init(label: "New York City", value: "NYC", disabled: false, title: "New York City"), + DropdownOption.Init(label: "Montreal", value: "MTL", disabled: false, title: "Montreal"), + DropdownOption.Init(label: "San Francisco", value: "SF", disabled: false, title: "San Francisco") + ), + Dropdown.Attr.placeholder("Select a city") + ) + ) + ); + + var dashApp = DashApp + .initDefault() + .withLayout(layout); + + var config = new DashGiraffeConfig( + hostName: "localhost", + logLevel: LogLevel.Information, + ipAddress: "127.0.0.1", + port: 8050, + errorHandler: (Exception err) => err.Message + ); + + dashApp.run( + args: new string[] { }, + config + ); + } + } +} diff --git a/Dash.NET.Giraffe.CSharp.Tests/CoreComponents/Input/Input_InputAllTypes.cs b/Dash.NET.Giraffe.CSharp.Tests/CoreComponents/Input/Input_InputAllTypes.cs new file mode 100644 index 0000000..8970ee7 --- /dev/null +++ b/Dash.NET.Giraffe.CSharp.Tests/CoreComponents/Input/Input_InputAllTypes.cs @@ -0,0 +1,82 @@ +using System; +using Dash.NET.CSharp.Giraffe; +using Microsoft.Extensions.Logging; +using Dash.NET.CSharp.DCC; +using static Dash.NET.CSharp.Dsl; +using System.Linq; +using Dash.NET.CSharp; + +namespace Documentation.Examples +{ + class Input_InputAllTypes + { + public static void RunExample() + { + var out_all_types = "out-all-types"; + var outputTarget = (out_all_types, ComponentProperty.Children); + + var ALLOWED_TYPES = new[] + { + InputType.Text(), + InputType.Number(), + InputType.Password(), + InputType.Email(), + InputType.Search(), + InputType.Tel(), + InputType.Url(), + InputType.Range(), + InputType.Hidden() + }; + + var layout = + Html.div( + Attr.children( + ALLOWED_TYPES.Select(x => + Input.input( + id: x.ToString(), + Input.Attr.inputType(x), + Input.Attr.placeholder(x.ToString()), + Input.Attr.value("") + ) + ).Append(Html.div(Attr.id(out_all_types))) + ) + ); + + var callback = + Callback.Create( + input: ALLOWED_TYPES.Select(x => (x.ToString(), ComponentProperty.Value)).ToArray(), + output: new[] + { + outputTarget + }, + handler: (string textInput, string numberInput, string passwordInput, string emailInput, string searchInput, string telInput, string urlInput, string rangeInput, string hiddenInput) => + { + var inputs = new[] { textInput, numberInput, passwordInput, emailInput, searchInput, telInput, urlInput, rangeInput, hiddenInput }; + var stringResult = inputs.Where(x => x != ""); + return new[] + { + CallbackResult.Create(outputTarget, String.Join(" | ", stringResult)) + }; + } + ); + + var dashApp = DashApp + .initDefault() + .withLayout(layout) + .addCallback(callback); + + var config = new DashGiraffeConfig( + hostName: "localhost", + logLevel: LogLevel.Information, + ipAddress: "127.0.0.1", + port: 8050, + errorHandler: (Exception err) => err.Message + ); + + dashApp.run( + args: new string[] { }, + config + ); + } + } +} diff --git a/Dash.NET.Giraffe.CSharp.Tests/CoreComponents/Input/Input_InputBasic.cs b/Dash.NET.Giraffe.CSharp.Tests/CoreComponents/Input/Input_InputBasic.cs new file mode 100644 index 0000000..8911c60 --- /dev/null +++ b/Dash.NET.Giraffe.CSharp.Tests/CoreComponents/Input/Input_InputBasic.cs @@ -0,0 +1,89 @@ +using System; +using Dash.NET.CSharp.Giraffe; +using Microsoft.Extensions.Logging; +using Dash.NET.CSharp.DCC; +using static Dash.NET.CSharp.Dsl; +using Dash.NET.CSharp; + +namespace Documentation.Examples +{ + class Input_InputBasic + { + public static void RunExample() + { + var input1 = "input1"; + var input2 = "input2"; + var output = "output"; + var outputTarget = (output, ComponentProperty.Children); + + var externalStylesheets = new[] { "https://codepen.io/chriddyp/pen/bWLwgP.css" }; + + var layout = + Html.div( + Attr.children( + Html.i( + Attr.children( + Html.text("Try typing in input 1 & 2, and observe how debounce is impacting the callbacks.Press Enter and / or Tab key in Input 2 to cancel the delay") + ) + ), + Html.br(), + Input.input( + id: input1, + Input.Attr.inputType(InputType.Text()), + Input.Attr.placeholder(""), + Input.Attr.value(""), + Input.Attr.style(Style.StyleProperty("marginRight", "10px")) + ), + Input.input( + id: input2, + Input.Attr.inputType(InputType.Text()), + Input.Attr.placeholder(""), + Input.Attr.value(""), + Input.Attr.debounce(true) + ), + Html.div(Attr.id(output)) + ) + ); + + var callback = + Callback.Create( + input: new[] + { + (input1, ComponentProperty.Value), + (input2, ComponentProperty.Value) + }, + output: new[] + { + outputTarget + }, + handler: (string input1, string input2) => + { + return new[] + { + CallbackResult.Create(outputTarget, ("Input 1: " + input1 + " and Input 2: " + input2)) + }; + }, + preventInitialCall: true + ); + + var dashApp = DashApp + .initDefault() + .appendCSSLinks(externalStylesheets) + .withLayout(layout) + .addCallback(callback); + + var config = new DashGiraffeConfig( + hostName: "localhost", + logLevel: LogLevel.Information, + ipAddress: "127.0.0.1", + port: 8050, + errorHandler: (Exception err) => err.Message + ); + + dashApp.run( + args: new string[] { }, + config + ); + } + } +} diff --git a/Dash.NET.Giraffe.CSharp.Tests/CoreComponents/Input/Input_InputNumberType.cs b/Dash.NET.Giraffe.CSharp.Tests/CoreComponents/Input/Input_InputNumberType.cs new file mode 100644 index 0000000..a6263e5 --- /dev/null +++ b/Dash.NET.Giraffe.CSharp.Tests/CoreComponents/Input/Input_InputNumberType.cs @@ -0,0 +1,89 @@ +using System; +using Dash.NET.CSharp.Giraffe; +using Microsoft.Extensions.Logging; +using Dash.NET.CSharp.DCC; +using static Dash.NET.CSharp.Dsl; +using Dash.NET.CSharp; + +namespace Documentation.Examples +{ + class Input_InputNumberType + { + public static void RunExample() + { + var dfalse = "dfalse"; + var dtrue = "dtrue"; + var input_range = "input_range"; + var number_out = "number_out"; + var outputTarget = (number_out, ComponentProperty.Children); + + var layout = + Html.div( + Attr.children( + Input.input( + id: dfalse, + Input.Attr.inputType(InputType.Number()), + Input.Attr.placeholder("Debounce False"), + Input.Attr.value(null) + ), + Input.input( + id: dtrue, + Input.Attr.inputType(InputType.Number()), + Input.Attr.placeholder("Debounce True"), + Input.Attr.value(null), + Input.Attr.debounce(true) + ), + Input.input( + id: input_range, + Input.Attr.inputType(InputType.Number()), + Input.Attr.placeholder("Input with range"), + Input.Attr.value(null), + Input.Attr.min(10), Input.Attr.max(100), Input.Attr.step(3) + ), + Html.br(), + Html.div(Attr.id(number_out)) + ) + ); + + var callback = + Callback.Create( + input: new[] + { + (dfalse, ComponentProperty.Value), + (dtrue, ComponentProperty.Value), + (input_range, ComponentProperty.Value) + }, + output: new[] + { + outputTarget + }, + handler: (int? fval, int? tval, int? rangeval) => + { + return new[] + { + CallbackResult.Create(outputTarget, ("dfalse: " + fval + " dtrue: " + tval + " range: " + rangeval)) + }; + }, + preventInitialCall: true + ); + + var dashApp = DashApp + .initDefault() + .withLayout(layout) + .addCallback(callback); + + var config = new DashGiraffeConfig( + hostName: "localhost", + logLevel: LogLevel.Information, + ipAddress: "127.0.0.1", + port: 8050, + errorHandler: (Exception err) => err.Message + ); + + dashApp.run( + args: new string[] { }, + config + ); + } + } +} diff --git a/Dash.NET.Giraffe.CSharp.Tests/Layout_CoreComponents.cs b/Dash.NET.Giraffe.CSharp.Tests/Layout/Layout_CoreComponents.cs similarity index 72% rename from Dash.NET.Giraffe.CSharp.Tests/Layout_CoreComponents.cs rename to Dash.NET.Giraffe.CSharp.Tests/Layout/Layout_CoreComponents.cs index ba397ea..db03502 100644 --- a/Dash.NET.Giraffe.CSharp.Tests/Layout_CoreComponents.cs +++ b/Dash.NET.Giraffe.CSharp.Tests/Layout/Layout_CoreComponents.cs @@ -16,7 +16,8 @@ public static void RunExample() Html.div( Attr.children( Html.label(Attr.children("Dropdown")), - Dropdown.dropdown("dropdown", + Dropdown.dropdown( + id: "dropdown", Dropdown.Attr.options( DropdownOption.Init(label: "New York City", value: "NYC", disabled: false, title: "New York City"), DropdownOption.Init(label: "Montréal", value: "MTL", disabled: false, title: "Montréal"), @@ -26,7 +27,8 @@ public static void RunExample() ), Html.label(Attr.children("Multi-Select Dropdown")), - Dropdown.dropdown("multi-select-dropdown", + Dropdown.dropdown( + id: "multi-select-dropdown", Dropdown.Attr.options( DropdownOption.Init(label: "New York City", value: "NYC", disabled: false, title: "New York City"), DropdownOption.Init(label: "Montréal", value: "MTL", disabled: false, title: "Montréal"), @@ -37,7 +39,8 @@ public static void RunExample() ), Html.label(Attr.children("Radio Items")), - RadioItems.radioItems("radioitems", + RadioItems.radioItems( + id: "radioitems", RadioItems.Attr.options( RadioItemsOption.Init(label: "New York City", value: "NYC", disabled: false), RadioItemsOption.Init(label: "Montréal", value: "MTL", disabled: false), @@ -47,7 +50,8 @@ public static void RunExample() ), Html.label(Attr.children("Checkboxes")), - Checklist.checklist("checkboxes", + Checklist.checklist( + id: "checkboxes", Checklist.Attr.options( ChecklistOption.Init(label: "New York City", value: "NYC", disabled: false), ChecklistOption.Init(label: "Montréal", value: "MTL", disabled: false), @@ -56,29 +60,26 @@ public static void RunExample() ), Html.label(Attr.children("Text Input")), - Input.input("text-input", - new Input.Attr[] { - Input.Attr.inputType(InputType.Text()), - Input.Attr.value("MLT") - } + Input.input( + id: "text-input", + Input.Attr.inputType(InputType.Text()), + Input.Attr.value("MLT") ), Html.label(Attr.children("Slider")), Slider.slider("slider", - new Slider.Attr[] { - Slider.Attr.min(0), - Slider.Attr.max(9), - Slider.Attr.marks( - new Dictionary() - { - {1.0, Slider.Mark.Value("Label 1")}, - {2.0, Slider.Mark.Value("2")}, - {3.0, Slider.Mark.Value("3")}, - {4.0, Slider.Mark.Value("4")}, - {5.0, Slider.Mark.Value("5")} - } - ) - } + Slider.Attr.min(0), + Slider.Attr.max(9), + Slider.Attr.marks( + new Dictionary() + { + {1.0, Slider.Mark.Value("Label 1")}, + {2.0, Slider.Mark.Value("2")}, + {3.0, Slider.Mark.Value("3")}, + {4.0, Slider.Mark.Value("4")}, + {5.0, Slider.Mark.Value("5")} + } + ) ) ), Attr.style(Style.StyleProperty("columnCount", "2")) @@ -91,8 +92,8 @@ public static void RunExample() var config = new DashGiraffeConfig( hostName: "localhost", logLevel: LogLevel.Information, - ipAddress: "*", - port: 8000, + ipAddress: "127.0.0.1", + port: 8050, errorHandler: (Exception err) => err.Message ); diff --git a/Dash.NET.Giraffe.CSharp.Tests/Layout_FirstExample.cs b/Dash.NET.Giraffe.CSharp.Tests/Layout/Layout_FirstExample.cs similarity index 79% rename from Dash.NET.Giraffe.CSharp.Tests/Layout_FirstExample.cs rename to Dash.NET.Giraffe.CSharp.Tests/Layout/Layout_FirstExample.cs index 6b99ecb..acf9d09 100644 --- a/Dash.NET.Giraffe.CSharp.Tests/Layout_FirstExample.cs +++ b/Dash.NET.Giraffe.CSharp.Tests/Layout/Layout_FirstExample.cs @@ -15,10 +15,10 @@ public static void RunExample() var dataSF = new List>() { Tuple.Create("Apples", 4), Tuple.Create("Oranges", 1), Tuple.Create("Bananas", 2) }; var dataMontreal = new List>() { Tuple.Create("Apples", 2), Tuple.Create("Oranges", 4), Tuple.Create("Bananas", 5) }; - var figSF = Chart2D.Chart.Column(dataSF, "SF", true); - var figMontreal = Chart2D.Chart.Column(dataMontreal, "Montreal", true); + var chartSF = Chart2D.Chart.Column(dataSF, "SF", true); + var chartMontreal = Chart2D.Chart.Column(dataMontreal, "Montreal", true); - var fig = Chart.Combine(new List() { figSF, figMontreal }); + var chart = Chart.Combine(new List() { chartSF, chartMontreal }); var layout = Html.div( @@ -27,7 +27,7 @@ public static void RunExample() Html.div(Attr.children("Dash: A web application framework for your data")), Graph.graph( "my-graph", - Graph.Attr.figure(GenericChart.toFigure(fig)) + Graph.Attr.figure(GenericChart.toFigure(chart)) ) ) ); @@ -39,8 +39,8 @@ public static void RunExample() var config = new DashGiraffeConfig( hostName: "localhost", logLevel: LogLevel.Information, - ipAddress: "*", - port: 8000, + ipAddress: "127.0.0.1", + port: 8050, errorHandler: (Exception err) => err.Message ); diff --git a/Dash.NET.Giraffe.CSharp.Tests/Layout_Markdown.cs b/Dash.NET.Giraffe.CSharp.Tests/Layout/Layout_Markdown.cs similarity index 94% rename from Dash.NET.Giraffe.CSharp.Tests/Layout_Markdown.cs rename to Dash.NET.Giraffe.CSharp.Tests/Layout/Layout_Markdown.cs index 514af4d..18127a3 100644 --- a/Dash.NET.Giraffe.CSharp.Tests/Layout_Markdown.cs +++ b/Dash.NET.Giraffe.CSharp.Tests/Layout/Layout_Markdown.cs @@ -28,8 +28,8 @@ public static void RunExample() var config = new DashGiraffeConfig( hostName: "localhost", logLevel: LogLevel.Information, - ipAddress: "*", - port: 8000, + ipAddress: "127.0.0.1", + port: 8050, errorHandler: (Exception err) => err.Message ); diff --git a/Dash.NET.Giraffe.CSharp.Tests/Layout_MoreAboutHtmlComponents.cs b/Dash.NET.Giraffe.CSharp.Tests/Layout/Layout_MoreAboutHtmlComponents.cs similarity index 86% rename from Dash.NET.Giraffe.CSharp.Tests/Layout_MoreAboutHtmlComponents.cs rename to Dash.NET.Giraffe.CSharp.Tests/Layout/Layout_MoreAboutHtmlComponents.cs index 5456fb7..00d9904 100644 --- a/Dash.NET.Giraffe.CSharp.Tests/Layout_MoreAboutHtmlComponents.cs +++ b/Dash.NET.Giraffe.CSharp.Tests/Layout/Layout_MoreAboutHtmlComponents.cs @@ -20,10 +20,10 @@ public static void RunExample() var dataSF = new List>() { Tuple.Create("Apples", 4), Tuple.Create("Oranges", 1), Tuple.Create("Bananas", 2) }; var dataMontreal = new List>() { Tuple.Create("Apples", 2), Tuple.Create("Oranges", 4), Tuple.Create("Bananas", 5) }; - var figSF = Plotly.NET.Chart2D.Chart.Column(dataSF, "SF", true); - var figMontreal = Plotly.NET.Chart2D.Chart.Column(dataMontreal, "Montreal", true); + var chartSF = Chart2D.Chart.Column(dataSF, "SF", true); + var chartMontreal = Chart2D.Chart.Column(dataMontreal, "Montreal", true); - var fig = Chart.Combine(new List() { figSF, figMontreal }).WithLayout( + var chart = Chart.Combine(new List() { chartSF, chartMontreal }).WithLayout( Layout.init( PlotBGColor: Color.fromHex(colors["background"]), PaperBGColor: Color.fromHex(colors["background"]), @@ -50,7 +50,7 @@ public static void RunExample() ), Graph.graph( "my-graph", - Graph.Attr.figure(GenericChart.toFigure(fig)) + Graph.Attr.figure(GenericChart.toFigure(chart)) ) ) ); @@ -62,8 +62,8 @@ public static void RunExample() var config = new DashGiraffeConfig( hostName: "localhost", logLevel: LogLevel.Information, - ipAddress: "*", - port: 8000, + ipAddress: "127.0.0.1", + port: 8050, errorHandler: (Exception err) => err.Message ); diff --git a/Dash.NET.Giraffe.CSharp.Tests/Layout_ReusableComponents.cs b/Dash.NET.Giraffe.CSharp.Tests/Layout/Layout_ReusableComponents.cs similarity index 96% rename from Dash.NET.Giraffe.CSharp.Tests/Layout_ReusableComponents.cs rename to Dash.NET.Giraffe.CSharp.Tests/Layout/Layout_ReusableComponents.cs index 3930003..20b8cf7 100644 --- a/Dash.NET.Giraffe.CSharp.Tests/Layout_ReusableComponents.cs +++ b/Dash.NET.Giraffe.CSharp.Tests/Layout/Layout_ReusableComponents.cs @@ -44,8 +44,8 @@ public static void RunExample() var config = new DashGiraffeConfig( hostName: "localhost", logLevel: LogLevel.Information, - ipAddress: "*", - port: 8000, + ipAddress: "127.0.0.1", + port: 8050, errorHandler: (Exception err) => err.Message ); diff --git a/Dash.NET.Giraffe.CSharp.Tests/Layout_Viz.cs b/Dash.NET.Giraffe.CSharp.Tests/Layout/Layout_Viz.cs similarity index 86% rename from Dash.NET.Giraffe.CSharp.Tests/Layout_Viz.cs rename to Dash.NET.Giraffe.CSharp.Tests/Layout/Layout_Viz.cs index 0960330..88547fa 100644 --- a/Dash.NET.Giraffe.CSharp.Tests/Layout_Viz.cs +++ b/Dash.NET.Giraffe.CSharp.Tests/Layout/Layout_Viz.cs @@ -3,8 +3,6 @@ using System.IO; using Dash.NET.CSharp.DCC; using Plotly.NET; -using Giraffe; -using System.Collections.Generic; using Microsoft.Extensions.Logging; using static Dash.NET.CSharp.Dsl; using Dash.NET.CSharp.Giraffe; @@ -13,6 +11,7 @@ using System.Net.Http; using CsvHelper; using CsvHelper.Configuration.Attributes; +using Plotly.NET.LayoutObjects; namespace Documentation.Examples { @@ -55,10 +54,10 @@ public static void RunExample() Labels: labels.ToList() ) .WithXAxis( - Plotly.NET.LayoutObjects.LinearAxis.init(AxisType: StyleParam.AxisType.Log, Title: Plotly.NET.Title.init("Gdp per capita")) + LinearAxis.init(AxisType: StyleParam.AxisType.Log, Title: Title.init("Gdp per capita")) ) .WithYAxis( - Plotly.NET.LayoutObjects.LinearAxis.init(Title: Plotly.NET.Title.init("Life expectancy")) + LinearAxis.init(Title: Title.init("Life expectancy")) ); var fig = GenericChart.toFigure(chart); @@ -76,8 +75,8 @@ public static void RunExample() var config = new DashGiraffeConfig( hostName: "localhost", logLevel: LogLevel.Information, - ipAddress: "*", - port: 8000, + ipAddress: "127.0.0.1", + port: 8050, errorHandler: (Exception err) => err.Message ); diff --git a/Dash.NET.Giraffe.CSharp.Tests/Program.cs b/Dash.NET.Giraffe.CSharp.Tests/Program.cs index 783d927..4cef4a7 100644 --- a/Dash.NET.Giraffe.CSharp.Tests/Program.cs +++ b/Dash.NET.Giraffe.CSharp.Tests/Program.cs @@ -1,17 +1,4 @@ -using System; -using System.Net; -using System.IO; -using Dash.NET.CSharp.DCC; -using Plotly.NET; -using Giraffe; -using System.Collections.Generic; -using Microsoft.Extensions.Logging; -using static Dash.NET.CSharp.Dsl; -using Dash.NET.CSharp.Giraffe; -using System.Linq; -using System.Globalization; - -namespace Documentation.Examples +namespace Documentation.Examples { class Program { @@ -26,7 +13,25 @@ static void Main(string[] args) //Callback_SimpleCallback.RunExample(); //Callback_SimpleSlider.RunExample(); - Callback_MultiInputs.RunExample(); + //Callback_MultiInputs.RunExample(); + //Callback_MultiOutputs.RunExample(); + //Callback_CallbackChain.RunExample(); + //Callback_BasicInput.RunExample(); + //Callback_BasicState.RunExample(); + + //CORE COMPONENTS + + //Dropdown_Dropdown.RunExample(); + //Dropdown_DropdownMultiValue.RunExample(); + //Dropdown_DropdownDisableSearch.RunExample(); + //Dropdown_DropdownClearable.RunExample(); + //Dropdown_DropdownPlaceholder.RunExample(); + //Dropdown_DropdownDisableOptions.RunExample(); + //Dropdown_DropdownDynamicOptions.RunExample(); + + Input_InputAllTypes.RunExample(); + //Input_InputBasic.RunExample(); + //Input_InputNumberType.RunExample(); } } } \ No newline at end of file