{"action":"created","comment":{"url":"https://api.github.com/repos/plotly/dash-docs/pulls/comments/134646392","pull_request_review_id":57961586,"id":134646392,"diff_hunk":"@@ -0,0 +1,1005 @@\n+import dash_core_components as dcc\n+import dash_html_components as html\n+import plotly.graph_objs as go\n+import os as _os\n+import json\n+import dash as _dash\n+import pandas as pd\n+import styles\n+from datetime import datetime as dt\n+\n+_current_path = _os.path.join(_os.path.dirname(_os.path.abspath(dcc.__file__)),\n+                              'metadata.json')\n+\n+def object_hook_handler(obj):\n+    if 'required' in obj:\n+        obj.pop('required')\n+    if 'id' in obj:\n+        obj['id']['Description'] = \"Optional identifier used to reference\\\n+                              component in callbacks\"\n+    if 'className' in obj:\n+        obj['className']['Description'] = '''Sets the class name of the element (the value of an\n+                                             element's html class attribute)'''\n+    if 'type' in obj and obj['type'] != None and 'name' in obj['type']:\n+        if (obj['type']['name'] == 'enum'):\n+            holder = {'Possible values': []}\n+            for i in obj['type']['value']:\n+                holder['Possible values'].append(i['value'])\n+            obj['Type'] = holder.items()[0]\n+        elif (obj['type']['name'] == 'arrayOf'):\n+            objVal = obj['type']['value']\n+            holder = {'Array Of': [{}]}\n+            if(objVal['name'] == 'shape'):\n+                for i in objVal['value']:\n+                    holder['Array Of'][0][i] = objVal['value'][i]['name']\n+                obj['Type'] = holder.items()[0]\n+            elif('value' in objVal):\n+                for i in objVal['value']:\n+                    holder['Array Of'].append(str(i))\n+                obj['Type'] = holder.items()[0]\n+            else:\n+                obj['Type'] = \"Array of: [\" + objVal['name'] + \"]\"\n+        elif (obj['type']['name'] == 'union'):\n+            objVal = obj['type']['value']\n+            holder = []\n+            for i in objVal:\n+                holder.append(i['name'])\n+                if(len(i) > 1):\n+                    holder[-1] = \"Array of: [\" + str(i['value']['name']) + \"]\"\n+            obj['Type'] = \"One of the following: \" + str(holder)\n+        elif (obj['type']['name'] == 'shape'):\n+            objVal = obj['type']\n+            holder = {}\n+            if('value' in objVal):\n+                for i in objVal['value']:\n+                    holder[i] = objVal['value'][i]['name']\n+            if(len(holder.keys()) > 5):\n+                obj['Type'] = 'dict'\n+                obj['Default Value'] = \"Check plotly.js docs for more info\"\n+            else:\n+                obj['Type'] = \"Dict of: \" + str(holder)\n+        else:\n+            obj['Type'] = obj['type']['name']\n+        obj.pop('type')\n+\n+    if 'defaultValue' in obj:\n+        if(obj['defaultValue']['value'] == 'true'):\n+            obj['defaultValue']['value'] = 'True'\n+        elif(obj['defaultValue']['value'] == 'false'):\n+            obj['defaultValue']['value'] = 'False'\n+        elif(type(obj['defaultValue']['value']) == dict):\n+            print(obj['defaultValue']['value'])\n+            obj['defaultValue']['value'] = 'Checkout plotly.js docs for\\\n+                                            more info'\n+\n+        obj['Default Value'] = obj['defaultValue']['value']\n+        obj.pop('defaultValue')\n+    if 'description' in obj:\n+        obj['Description'] = obj['description']\n+        obj.pop('description')\n+    return obj\n+\n+with open(_current_path, 'r') as f:\n+    metadata = json.load(f, object_hook=object_hook_handler)\n+\n+\n+def get_dataframe(string):\n+    prefix = 'src/components/'\n+    suffix = '.react.js'\n+    fullString = prefix+string+suffix\n+    df = pd.DataFrame(metadata[fullString]\n+                              ['props']).transpose()\n+    if('dashEvents' in df.index.tolist()):\n+        df.drop(['dashEvents'], inplace=True)\n+    if('fireEvent' in df.index):\n+        df.drop(['fireEvent'], inplace=True)\n+    if('setProps' in df.index):\n+        df.drop(['setProps'], inplace=True)\n+    if('dashFireEvent' in df.index):\n+        df.drop(['dashFireEvent'], inplace=True)\n+    if('className' in df.index.tolist()):\n+        reindex = ['id', 'className']\n+    else:\n+        reindex = ['id']\n+    reindex.extend(df.loc[(df.index != 'id') &\n+                          (df.index != 'className')].index.tolist())\n+    df['Props'] = df.index\n+    df = df.reindex(reindex)\n+    df.fillna('N/A', inplace=True)\n+    if('Default Value' in df.columns.values.tolist()):\n+        df = df[['Props', 'Description', 'Type', 'Default Value']]\n+    else:\n+        df = df[['Props', 'Description', 'Type']]\n+\n+    if('config' in df['Props']):\n+        df.set_value('config', 'Default Value',\n+                     \"Check Plotly.js docs for more information\")\n+\n+    return df\n+\n+def generate_table(dataframe):\n+    rows = []\n+    for i in range(len(dataframe)):\n+        internalRow = []\n+        for col in dataframe.columns:\n+            # Body\n+            if(type(dataframe.iloc[i][col]) == tuple and\n+               type(dataframe.iloc[i][col][1][0]) != dict):\n+                internalRow.append(html.Td(dataframe.iloc[i][col][0] + ': ' +\n+                                   str([str(j) for j in dataframe.iloc[i][col]\n+                                                                      [1]])))\n+            elif(type(dataframe.iloc[i][col]) == tuple and\n+                 type(dataframe.iloc[i][col][1][0]) == dict):\n+                internalRow.append(html.Td(\"Array of Dict: \" +\n+                                           str(dataframe.iloc[i][col][1])))\n+            else:\n+                if(col == 'Props'):\n+                    internalRow.append(html.Td(dcc.Markdown('`' +\n+                                       dataframe.iloc[i][col] + '`'),\n+                                       style={'text-align': 'center'}))\n+                elif(col == 'Description'):\n+                    internalRow.append(html.Td(dataframe.iloc[i][col],\n+                                       style={'font-size': '0.95em'}))\n+                else:\n+                    internalRow.append(html.Td(str(dataframe.iloc[i][col])))\n+        rows.append(html.Tr(internalRow))\n+    table = html.Table(\n+            [html.Tr([html.Th(col, style={'text-align': 'center'}) for col in\n+                     dataframe.columns])] + rows)\n+\n+    return table\n+\n+\n+Dropdown = html.Div(children=[\n+\n+    html.H3('Dropdown Extra Examples'),\n+    html.Hr(),\n+    html.H4('Searching Dropdown'),\n+    dcc.SyntaxHighlighter('''import dash_core_components as dcc\n+\n+dcc.Dropdown(\n+    options=[\n+        {'label': 'New York City', 'value': 'NYC'},\n+        {'label': 'Montreal', 'value': 'MTL'},\n+        {'label': 'San Francisco', 'value': 'SF'}\n+    ],\n+    searchable=True,\n+    clearable=False,\n+    placeholder=\"Try typing: \"New York\"\n+)\n+\n+    ''', customStyle=styles.code_container, language='python'),\n+\n+    dcc.Dropdown(\n+            options=[\n+                {'label': 'New York City', 'value': 'NYC'},\n+                {'label': 'Montreal', 'value': 'MTL'},\n+                {'label': 'San Francisco', 'value': 'SF'}\n+            ],\n+            searchable=True,\n+            clearable=False,\n+            placeholder='Try typing: \"New York\"'\n+    ),\n+\n+    html.Hr(),\n+    html.H4('Clearing Dropdown'),\n+    html.P(\"Try selecting New York or San Francisco\"),\n+    dcc.SyntaxHighlighter('''import dash_core_components as dcc\n+\n+dcc.Dropdown(\n+    options=[\n+        {'label': 'New York City', 'value': 'NYC'},\n+        {'label': 'Montreal', 'value': 'MTL'},\n+        {'label': 'San Francisco', 'value': 'SF'},\n+    ],\n+    value='MTL',\n+    clearable=True\n+)\n+\n+    ''', customStyle=styles.code_container, language='python'),\n+\n+    dcc.Dropdown(\n+        id='clearable',\n+        options=[\n+            {'label': 'New York City', 'value': 'BBC'},\n+            {'label': 'Montreal', 'value': 'T'},\n+            {'label': 'San Francisco', 'value': 'F'},\n+        ],\n+        value='T',\n+        clearable=True\n+    ),\n+\n+    html.Hr(),\n+    html.H4('Disabled Options'),\n+    html.P(\"Try selecting New York or San Francisco\"),\n+    dcc.SyntaxHighlighter('''import dash_core_components as dcc\n+\n+dcc.Dropdown(\n+    options=[\n+        {'label': 'New York City', 'value': 'NYC', 'disabled': 'True'},\n+        {'label': 'Montreal', 'value': 'MTL'},\n+        {'label': 'San Francisco', 'value': 'SF', 'disabled': 'True'}\n+    ],\n+    clearable=False,\n+)\n+\n+    ''', customStyle=styles.code_container, language='python'),\n+\n+    dcc.Dropdown(\n+            options=[\n+                {'label': 'New York City', 'value': 'NYC', 'disabled': 'True'},\n+                {'label': 'Montreal', 'value': 'MTL'},\n+                {'label': 'San Francisco', 'value': 'SF', 'disabled': 'True'}\n+            ],\n+            clearable=False,\n+    ),\n+\n+    html.Hr(),\n+    html.H4('Disabled Dropdown'),\n+    dcc.SyntaxHighlighter('''import dash_core_components as dcc\n+\n+dcc.Dropdown(\n+    disabled=True\n+)\n+\n+    ''', customStyle=styles.code_container, language='python'),\n+\n+    dcc.Dropdown(\n+        disabled=True\n+    ),\n+\n+\n+    html.Hr(),\n+    html.H4(\"Dropdown Proptypes\"),\n+    generate_table(get_dataframe('Dropdown'))\n+])\n+\n+\n+# RangeSlider\n+Slider = html.Div(children=[\n+    html.H3('RangeSlider Extra Examples'),\n+    html.Hr(),\n+    html.H4('Slider Dots'),\n+    dcc.SyntaxHighlighter('''import dash_core_components as dcc\n+\n+dcc.Slider(\n+    min=0,\n+    max=20,\n+    value=10,\n+    dots=True\n+)\n+\n+    ''', customStyle=styles.code_container, language='python'),\n+    html.Div([\n+        dcc.Slider(\n+            min=0,\n+            max=20,\n+            value=10,\n+            dots=True\n+        ),\n+    ], className='example-container'),\n+    html.Hr(),\n+    html.H4('Vertical Slider'),\n+    dcc.SyntaxHighlighter('''import dash_core_components as dcc\n+\n+dcc.Slider(\n+    min=0,\n+    max=20,\n+    value=20,\n+    vertical=True\n+)\n+\n+    ''', customStyle=styles.code_container, language='python'),\n+    html.Div([\n+        dcc.Slider(\n+            min=0,\n+            max=20,\n+            value=10,\n+            vertical=True\n+        ),\n+    ]),\n+    html.Hr(),\n+    html.H4('Included Prop'),\n+    dcc.SyntaxHighlighter('''import dash_core_components as dcc\n+\n+dcc.Slider(\n+    min=0,\n+    max=20,\n+    value=20,\n+    included=False\n+)\n+\n+    ''', customStyle=styles.code_container, language='python'),\n+    html.Div([\n+        dcc.Slider(\n+            min=0,\n+            max=20,\n+            value=10,\n+            included=False\n+        ),\n+    ], className='example-container'),\n+    html.Hr(),\n+    html.H4(\"Slider Proptypes\"),\n+    generate_table(get_dataframe('Slider'))\n+])\n+\n+\n+# RangeSlider\n+RangeSlider = html.Div(children=[\n+    html.H3('Slider Extra Examples'),\n+    html.Hr(),\n+    html.H4('Multiple Handles'),\n+    dcc.Markdown('To create multiple handles \\\n+                  just define more values for `value`!'),\n+    dcc.SyntaxHighlighter('''import dash_core_components as dcc\n+\n+dcc.RangeSlider(\n+    min=0,\n+    max=30,\n+    value=[1, 3, 4, 5, 12, 17]\n+)\n+\n+    ''', customStyle=styles.code_container, language='python'),\n+    html.Div([\n+        dcc.RangeSlider(\n+            min=0,\n+            max=30,\n+            value=[1, 3, 4, 5, 12, 17]\n+        ),\n+    ], className='example-container'),\n+    html.Hr(),\n+    html.H4('Pushable Handles'),\n+    dcc.Markdown(\"`Pushable` can take on two different sets of values. \\\n+                Either a `bool` or a numerical value. \\\n+                Try moving the handles around! \"),\n+    dcc.SyntaxHighlighter('''import dash_core_components as dcc\n+\n+dcc.RangeSlider(\n+    min=0,\n+    max=30,\n+    value=[8, 10, 15, 17, 20],\n+    pushable=2\n+)\n+\n+    ''', customStyle=styles.code_container, language='python'),\n+    html.Div([\n+        dcc.RangeSlider(\n+            min=0,\n+            max=30,\n+            value=[8, 10, 15, 17, 20],\n+            pushable=2\n+        ),\n+    ], className='example-container'),\n+    html.Hr(),\n+    html.H4('Included Prop'),\n+    dcc.Markdown(\"If `included=True`, the rail will not highlight between\\\n+                the points, becoming an independent point rather than\\\n+                continuous\"),\n+    dcc.SyntaxHighlighter('''import dash_core_components as dcc\n+\n+dcc.RangeSlider(\n+    min=0,\n+    max=30,\n+    value=[8, 10, 15],\n+    included=False\n+)\n+\n+    ''', customStyle=styles.code_container, language='python'),\n+    html.Div([\n+        dcc.RangeSlider(\n+            min=0,\n+            max=30,\n+            value=[8, 10, 15],\n+            included=False\n+        ),\n+    ], className='example-container'),\n+    html.Hr(),\n+    html.H4('Crossing Handles'),\n+    dcc.Markdown(\"If `allowCross=False`, the handles will not be allowed to\\\n+                  cross over each other\"),\n+    dcc.SyntaxHighlighter('''import dash_core_components as dcc\n+\n+dcc.RangeSlider(\n+    min=0,\n+    max=30,\n+    value=[8, 10, 15],\n+    allowCross=False\n+)\n+\n+    ''', customStyle=styles.code_container, language='python'),\n+    html.Div([\n+        dcc.RangeSlider(\n+            min=0,\n+            max=30,\n+            value=[10, 15],\n+            allowCross=False\n+        ),\n+    ], className='example-container'),\n+    html.Hr(),\n+    html.H4(\"RangeSlider Proptypes\"),\n+    generate_table(get_dataframe('RangeSlider'))\n+])\n+\n+\n+# Checklist\n+Checklist = html.Div(children=[\n+    html.H3('Checklist Proptypes'),\n+    generate_table(get_dataframe('Checklist'))\n+])\n+\n+\n+# Input\n+Input = html.Div(children=[\n+    html.H3('Input Proptypes'),\n+    generate_table(get_dataframe('Input'))\n+])\n+\n+\n+# RadioItems\n+RadioItems = html.Div(children=[\n+    html.H3('RadioItem Proptypes'),\n+    generate_table(get_dataframe('RadioItems'))\n+])\n+\n+\n+# Markdown\n+Markdown = html.Div(children=[\n+    html.H3('Markdown Proptypes'),\n+    generate_table(get_dataframe('Markdown'))\n+])\n+\n+\n+# Graph\n+Graph = html.Div(children=[\n+    html.H3('Graph Extra Examples'),\n+    html.Hr(),\n+    html.H4('Hide Modebar'),\n+    dcc.Markdown('To hide the modebar, just add it to the `config`!'),\n+    dcc.SyntaxHighlighter('''import dash_core_components as dcc\n+import plotly.graph_objs as go\n+\n+dcc.Graph(\n+    figure=go.Figure(\n+        data=[\n+            go.Scatter(x=[1, 2, 3], y=[3, 2, 4], mode='lines'),\n+            go.Scatter(x=[1, 2, 3], y=[4, 1, 5], mode='lines')\n+        ],\n+        layout=go.Layout(\n+            title='Quarterly Results',\n+            showlegend=False,\n+            margin=go.Margin(l=20, r=0, t=40, b=20)\n+        ),\n+        config=\n+    ),\n+    style={'height': 300},\n+    config={'displayModeBar': False},\n+    id='my-graph'\n+)\n+\n+    ''', customStyle=styles.code_container, language='python'),\n+    html.Div([\n+        dcc.Graph(\n+            figure=go.Figure(\n+                data=[\n+                    go.Scatter(x=[1, 2, 3], y=[3, 2, 4], mode='lines'),\n+                    go.Scatter(x=[1, 2, 3], y=[4, 1, 5], mode='lines')\n+                ],\n+                layout=go.Layout(\n+                    title='Quarterly Results',\n+                    showlegend=False,\n+                    margin=go.Margin(l=20, r=0, t=40, b=20)\n+                ),\n+            ),\n+            style={'height': 300},\n+            config={'displayModeBar': True},\n+            id='my-graph'\n+        ),\n+    ], className='example-container'),\n+    html.Hr(),\n+    html.H4('Create Static Plot'),\n+    dcc.Markdown('To create a static plot, all you have to do again is\\\n+                  change the `config` value!'),\n+    dcc.SyntaxHighlighter('''import dash_core_components as dcc\n+import plotly.graph_objs as go\n+\n+dcc.Graph(\n+    figure=go.Figure(\n+        data=[\n+            go.Scatter(x=[1, 2, 3], y=[3, 2, 4], mode='lines'),\n+            go.Scatter(x=[1, 2, 3], y=[4, 1, 5], mode='lines')\n+        ],\n+        layout=go.Layout(\n+            title='Quarterly Results',\n+            showlegend=False,\n+            margin=go.Margin(l=20, r=0, t=40, b=20)\n+        ),\n+    ),\n+    style={'height': 300},\n+    config={'staticPlot': True},\n+    id='my-graph'\n+)\n+\n+    ''', customStyle=styles.code_container, language='python'),\n+    html.Div([\n+        dcc.Graph(\n+            figure=go.Figure(\n+                data=[\n+                    go.Scatter(x=[1, 2, 3], y=[3, 2, 4], mode='lines'),\n+                    go.Scatter(x=[1, 2, 3], y=[4, 1, 5], mode='lines')\n+                ],\n+                layout=go.Layout(\n+                    title='Quarterly Results',\n+                    showlegend=False,\n+                    margin=go.Margin(l=20, r=0, t=40, b=20)\n+                ),\n+            ),\n+            config={'staticPlot': True},\n+            style={'height': 300},\n+            id='my-graph'\n+        ),\n+    ], className='example-container'),\n+    html.Hr(),\n+    html.H4('Graph PropTypes'),\n+    generate_table(get_dataframe('Graph'))\n+])\n+\n+\n+# DatePickerRange\n+DatePickerRange = html.Div(children=[\n+    html.H3(\"DatePickerRange Extra Examples\"),\n+    html.Hr(),\n+    html.H4('Calendar Orientation'),\n+    dcc.Markdown('Calendar can either be displayed vertically or horizontally'),\n+    dcc.SyntaxHighlighter('''import dash_core_components as dcc\n+from datetime import datetime as dt\n+\n+dcc.DatePickerRange(\n+    id='date-picker-range',\n+    calendar_orientation='vertical',\n+    start_date_placeholder_text='Test out',\n+    end_date_placeholder_text='the vertical here!'\n+)\n+\n+''', language='python', customStyle=styles.code_container),\n+    dcc.DatePickerRange(\n+        id='date-picker-range',\n+        calendar_orientation='vertical',\n+        start_date_placeholder_text='Test out the',\n+        end_date_placeholder_text='calendar!'\n+    ),\n+    html.Hr(),\n+    html.H4('Show outside days'),\n+    dcc.Markdown('To show days outside the curret calender month,\\\n+                 `show_outside_days` needs to be set to True'),\n+    dcc.SyntaxHighlighter('''import dash_core_components as dcc\n+from datetime import datetime as dt\n+\n+dcc.DatePickerRange(\n+    id='date-picker-range',\n+    show_outside_days=True,\n+    start_date_placeholder_text='With',\n+    end_date_placeholder_text='Outside Days'\n+),\n+\n+dcc.DatePickerRange(\n+    id='date-picker-range',\n+    show_outside_days=False,\n+    start_date_placeholder_text='Without',\n+    end_date_placeholder_text='Outside Days',\n+)\n+\n+''', language='python', customStyle=styles.code_container),\n+    dcc.DatePickerRange(\n+        id='date-picker-range',\n+        show_outside_days=True,\n+        start_date_placeholder_text='With',\n+        end_date_placeholder_text='Outside Days'\n+    ),\n+\n+    dcc.DatePickerRange(\n+        id='date-picker-range',\n+        show_outside_days=False,\n+        start_date_placeholder_text='Without',\n+        end_date_placeholder_text='Outside Days',\n+    ),\n+    html.Hr(),\n+    html.H4('Display Formats'),\n+    dcc.Markdown('You can show months in a variety of display formats.\\\n+                  Display formats denote how, your selected dates will look'),\n+    dcc.SyntaxHighlighter('''import dash_core_components as dcc\n+from datetime import datetime as dt\n+\n+dcc.DatePickerRange(\n+    id='date-picker-range',\n+    start_date=dt(2017, 8, 5),\n+    display_format='MM YY DD',\n+    end_date_placeholder_text='MM YY DD'\n+),\n+\n+dcc.DatePickerRange(\n+    id='date-picker-range',\n+    start_date=dt(2017, 8, 5),\n+    display_format='M, YYYY, DD',\n+    end_date_placeholder_text='M, YYYY, DD'\n+),\n+\n+dcc.DatePickerRange(\n+    id='date-picker-range',\n+    start_date=dt(2017, 8, 5),\n+    display_format='MMMM, D, Y',\n+    end_date_placeholder_text='MMMM, D, Y'\n+),\n+\n+dcc.DatePickerRange(\n+    id='date-picker-range',\n+    start_date=dt(2017, 8, 5),\n+    display_format='MM || DD || Y',\n+    end_date_placeholder_text='MM || DD || Y'\n+)\n+\n+''', language='python', customStyle=styles.code_container),\n+    dcc.DatePickerRange(\n+        id='date-picker-range',\n+        start_date=dt(2017, 8, 5),\n+        display_format='MM YY DD',\n+        end_date_placeholder_text='MM YY DD'\n+    ),\n+\n+    dcc.DatePickerRange(\n+        id='date-picker-range',\n+        start_date=dt(2017, 8, 5),\n+        display_format='M, YYYY, DD',\n+        end_date_placeholder_text='M, YYYY, DD'\n+    ),\n+\n+    dcc.DatePickerRange(\n+        id='date-picker-range',\n+        start_date=dt(2017, 8, 5),\n+        display_format='MMMM, D, Y',\n+        end_date_placeholder_text='MMMM, D, Y'\n+    ),\n+\n+    dcc.DatePickerRange(\n+        id='date-picker-range',\n+        start_date=dt(2017, 8, 5),\n+        display_format='MM || DD || Y',\n+        end_date_placeholder_text='MM || DD || Y'\n+    ),\n+    html.Hr(),\n+    html.H4('Month Formats'),\n+    dcc.Markdown('This prop determines how the month formats will be\\\n+                 displayed. Click on the date pickers below to see the\\\n+                 results.'),\n+    dcc.SyntaxHighlighter('''import dash_core_components as dcc\n+from datetime import datetime as dt\n+\n+dcc.DatePickerRange(\n+    id='date-picker-range',\n+    start_date_placeholder_text='Select',\n+    end_date_placeholder_text='me!',\n+    month_format='MM YY, DD'\n+),\n+\n+dcc.DatePickerRange(\n+    id='date-picker-range',\n+    start_date_placeholder_text='Select',\n+    end_date_placeholder_text='me too!',\n+    month_format='M, YYYY, DD'\n+),\n+\n+dcc.DatePickerRange(\n+    id='date-picker-range',\n+    start_date_placeholder_text='Try',\n+    end_date_placeholder_text='me!',\n+    month_format='MMMM D Y'\n+),\n+\n+dcc.DatePickerRange(\n+    id='date-picker-range',\n+    start_date_placeholder_text='Click',\n+    end_date_placeholder_text='me!',\n+    month_format='MMMM || DD || Y'\n+)\n+\n+''', language='python', customStyle=styles.code_container),\n+    dcc.DatePickerRange(\n+        id='date-picker-range',\n+        start_date_placeholder_text='Select',\n+        end_date_placeholder_text='me!',\n+        month_format='MM YY, DD'\n+    ),\n+\n+    dcc.DatePickerRange(\n+        id='date-picker-range',\n+        start_date_placeholder_text='Select',\n+        end_date_placeholder_text='me too!',\n+        month_format='M, YYYY, DD'\n+    ),\n+\n+    dcc.DatePickerRange(\n+        id='date-picker-range',\n+        start_date_placeholder_text='Try',\n+        end_date_placeholder_text='me!',\n+        month_format='MMMM D Y'\n+    ),\n+\n+    dcc.DatePickerRange(\n+        id='date-picker-range',\n+        start_date_placeholder_text='Click',\n+        end_date_placeholder_text='me!',\n+        month_format='MMMM || DD || Y'\n+    ),\n+    html.Hr(),\n+    html.H4('Min, Max and Initial Visible Month'),\n+    dcc.Markdown('The `min_date_allowed` prop determines the minimum\\\n+                 selectable date on the calendar, the `max_date_allowed`\\\n+                 determines the maximum selectable date on the calendar'),\n+    dcc.SyntaxHighlighter('''import dash_core_components as dcc\n+from datetime import datetime as dt\n+\n+dcc.DatePickerRange(\n+    id='date-picker-range',\n+    min_date_allowed=dt(2017, 8, 5),\n+    max_date_allowed=dt(2017, 8, 27),\n+    initial_visible_month=dt(2017, 8, 1)\n+)\n+\n+''', language='python', customStyle=styles.code_container),\n+    dcc.DatePickerRange(\n+        id='date-picker-range',\n+        min_date_allowed=dt(2017, 8, 5),\n+        max_date_allowed=dt(2017, 8, 27),\n+        initial_visible_month=dt(2017, 8, 1)\n+    ),\n+    html.Hr(),\n+    html.H4('Clearable Property'),\n+    dcc.SyntaxHighlighter('''import dash_core_components as dcc","path":"tutorial/core_component_examples.py","position":756,"original_position":756,"commit_id":"5c5a3497fd8f29cd4c721a57f947ce9dbd53a76c","original_commit_id":"5c5a3497fd8f29cd4c721a57f947ce9dbd53a76c","user":{"login":"chriddyp","id":1280389,"avatar_url":"https://avatars3.githubusercontent.com/u/1280389?v=4","gravatar_id":"","url":"https://api.github.com/users/chriddyp","html_url":"https://github.com/chriddyp","followers_url":"https://api.github.com/users/chriddyp/followers","following_url":"https://api.github.com/users/chriddyp/following{/other_user}","gists_url":"https://api.github.com/users/chriddyp/gists{/gist_id}","starred_url":"https://api.github.com/users/chriddyp/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/chriddyp/subscriptions","organizations_url":"https://api.github.com/users/chriddyp/orgs","repos_url":"https://api.github.com/users/chriddyp/repos","events_url":"https://api.github.com/users/chriddyp/events{/privacy}","received_events_url":"https://api.github.com/users/chriddyp/received_events","type":"User","site_admin":false},"body":"missing a description here like the rest of the examples","created_at":"2017-08-23T02:45:04Z","updated_at":"2017-08-23T02:45:04Z","html_url":"https://github.com/plotly/dash-docs/pull/23#discussion_r134646392","pull_request_url":"https://api.github.com/repos/plotly/dash-docs/pulls/23","_links":{"self":{"href":"https://api.github.com/repos/plotly/dash-docs/pulls/comments/134646392"},"html":{"href":"https://github.com/plotly/dash-docs/pull/23#discussion_r134646392"},"pull_request":{"href":"https://api.github.com/repos/plotly/dash-docs/pulls/23"}}},"pull_request":{"url":"https://api.github.com/repos/plotly/dash-docs/pulls/23","id":136865889,"html_url":"https://github.com/plotly/dash-docs/pull/23","diff_url":"https://github.com/plotly/dash-docs/pull/23.diff","patch_url":"https://github.com/plotly/dash-docs/pull/23.patch","issue_url":"https://api.github.com/repos/plotly/dash-docs/issues/23","number":23,"state":"open","locked":false,"title":"More examples","user":{"login":"alishobeiri","id":18422723,"avatar_url":"https://avatars2.githubusercontent.com/u/18422723?v=4","gravatar_id":"","url":"https://api.github.com/users/alishobeiri","html_url":"https://github.com/alishobeiri","followers_url":"https://api.github.com/users/alishobeiri/followers","following_url":"https://api.github.com/users/alishobeiri/following{/other_user}","gists_url":"https://api.github.com/users/alishobeiri/gists{/gist_id}","starred_url":"https://api.github.com/users/alishobeiri/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/alishobeiri/subscriptions","organizations_url":"https://api.github.com/users/alishobeiri/orgs","repos_url":"https://api.github.com/users/alishobeiri/repos","events_url":"https://api.github.com/users/alishobeiri/events{/privacy}","received_events_url":"https://api.github.com/users/alishobeiri/received_events","type":"User","site_admin":false},"body":"","created_at":"2017-08-21T23:55:20Z","updated_at":"2017-08-23T02:45:04Z","closed_at":null,"merged_at":null,"merge_commit_sha":"eb3bc5b568317ae195ab9e735d58b9f67953061f","assignee":null,"assignees":[],"requested_reviewers":[],"milestone":null,"commits_url":"https://api.github.com/repos/plotly/dash-docs/pulls/23/commits","review_comments_url":"https://api.github.com/repos/plotly/dash-docs/pulls/23/comments","review_comment_url":"https://api.github.com/repos/plotly/dash-docs/pulls/comments{/number}","comments_url":"https://api.github.com/repos/plotly/dash-docs/issues/23/comments","statuses_url":"https://api.github.com/repos/plotly/dash-docs/statuses/5c5a3497fd8f29cd4c721a57f947ce9dbd53a76c","head":{"label":"plotly:more-examples","ref":"more-examples","sha":"5c5a3497fd8f29cd4c721a57f947ce9dbd53a76c","user":{"login":"plotly","id":5997976,"avatar_url":"https://avatars2.githubusercontent.com/u/5997976?v=4","gravatar_id":"","url":"https://api.github.com/users/plotly","html_url":"https://github.com/plotly","followers_url":"https://api.github.com/users/plotly/followers","following_url":"https://api.github.com/users/plotly/following{/other_user}","gists_url":"https://api.github.com/users/plotly/gists{/gist_id}","starred_url":"https://api.github.com/users/plotly/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/plotly/subscriptions","organizations_url":"https://api.github.com/users/plotly/orgs","repos_url":"https://api.github.com/users/plotly/repos","events_url":"https://api.github.com/users/plotly/events{/privacy}","received_events_url":"https://api.github.com/users/plotly/received_events","type":"Organization","site_admin":false},"repo":{"id":84095619,"name":"dash-docs","full_name":"plotly/dash-docs","owner":{"login":"plotly","id":5997976,"avatar_url":"https://avatars2.githubusercontent.com/u/5997976?v=4","gravatar_id":"","url":"https://api.github.com/users/plotly","html_url":"https://github.com/plotly","followers_url":"https://api.github.com/users/plotly/followers","following_url":"https://api.github.com/users/plotly/following{/other_user}","gists_url":"https://api.github.com/users/plotly/gists{/gist_id}","starred_url":"https://api.github.com/users/plotly/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/plotly/subscriptions","organizations_url":"https://api.github.com/users/plotly/orgs","repos_url":"https://api.github.com/users/plotly/repos","events_url":"https://api.github.com/users/plotly/events{/privacy}","received_events_url":"https://api.github.com/users/plotly/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/plotly/dash-docs","description":":book: The Official Dash Userguide","fork":false,"url":"https://api.github.com/repos/plotly/dash-docs","forks_url":"https://api.github.com/repos/plotly/dash-docs/forks","keys_url":"https://api.github.com/repos/plotly/dash-docs/keys{/key_id}","collaborators_url":"https://api.github.com/repos/plotly/dash-docs/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/plotly/dash-docs/teams","hooks_url":"https://api.github.com/repos/plotly/dash-docs/hooks","issue_events_url":"https://api.github.com/repos/plotly/dash-docs/issues/events{/number}","events_url":"https://api.github.com/repos/plotly/dash-docs/events","assignees_url":"https://api.github.com/repos/plotly/dash-docs/assignees{/user}","branches_url":"https://api.github.com/repos/plotly/dash-docs/branches{/branch}","tags_url":"https://api.github.com/repos/plotly/dash-docs/tags","blobs_url":"https://api.github.com/repos/plotly/dash-docs/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/plotly/dash-docs/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/plotly/dash-docs/git/refs{/sha}","trees_url":"https://api.github.com/repos/plotly/dash-docs/git/trees{/sha}","statuses_url":"https://api.github.com/repos/plotly/dash-docs/statuses/{sha}","languages_url":"https://api.github.com/repos/plotly/dash-docs/languages","stargazers_url":"https://api.github.com/repos/plotly/dash-docs/stargazers","contributors_url":"https://api.github.com/repos/plotly/dash-docs/contributors","subscribers_url":"https://api.github.com/repos/plotly/dash-docs/subscribers","subscription_url":"https://api.github.com/repos/plotly/dash-docs/subscription","commits_url":"https://api.github.com/repos/plotly/dash-docs/commits{/sha}","git_commits_url":"https://api.github.com/repos/plotly/dash-docs/git/commits{/sha}","comments_url":"https://api.github.com/repos/plotly/dash-docs/comments{/number}","issue_comment_url":"https://api.github.com/repos/plotly/dash-docs/issues/comments{/number}","contents_url":"https://api.github.com/repos/plotly/dash-docs/contents/{+path}","compare_url":"https://api.github.com/repos/plotly/dash-docs/compare/{base}...{head}","merges_url":"https://api.github.com/repos/plotly/dash-docs/merges","archive_url":"https://api.github.com/repos/plotly/dash-docs/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/plotly/dash-docs/downloads","issues_url":"https://api.github.com/repos/plotly/dash-docs/issues{/number}","pulls_url":"https://api.github.com/repos/plotly/dash-docs/pulls{/number}","milestones_url":"https://api.github.com/repos/plotly/dash-docs/milestones{/number}","notifications_url":"https://api.github.com/repos/plotly/dash-docs/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/plotly/dash-docs/labels{/name}","releases_url":"https://api.github.com/repos/plotly/dash-docs/releases{/id}","deployments_url":"https://api.github.com/repos/plotly/dash-docs/deployments","created_at":"2017-03-06T16:30:08Z","updated_at":"2017-08-19T05:10:38Z","pushed_at":"2017-08-22T01:34:34Z","git_url":"git://github.com/plotly/dash-docs.git","ssh_url":"git@github.com:plotly/dash-docs.git","clone_url":"https://github.com/plotly/dash-docs.git","svn_url":"https://github.com/plotly/dash-docs","homepage":"https://plot.ly/dash","size":18483,"stargazers_count":34,"watchers_count":34,"language":"Python","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":12,"mirror_url":null,"open_issues_count":1,"forks":12,"open_issues":1,"watchers":34,"default_branch":"master"}},"base":{"label":"plotly:master","ref":"master","sha":"65e1559ae72f28a988b826afa12705740737fb0c","user":{"login":"plotly","id":5997976,"avatar_url":"https://avatars2.githubusercontent.com/u/5997976?v=4","gravatar_id":"","url":"https://api.github.com/users/plotly","html_url":"https://github.com/plotly","followers_url":"https://api.github.com/users/plotly/followers","following_url":"https://api.github.com/users/plotly/following{/other_user}","gists_url":"https://api.github.com/users/plotly/gists{/gist_id}","starred_url":"https://api.github.com/users/plotly/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/plotly/subscriptions","organizations_url":"https://api.github.com/users/plotly/orgs","repos_url":"https://api.github.com/users/plotly/repos","events_url":"https://api.github.com/users/plotly/events{/privacy}","received_events_url":"https://api.github.com/users/plotly/received_events","type":"Organization","site_admin":false},"repo":{"id":84095619,"name":"dash-docs","full_name":"plotly/dash-docs","owner":{"login":"plotly","id":5997976,"avatar_url":"https://avatars2.githubusercontent.com/u/5997976?v=4","gravatar_id":"","url":"https://api.github.com/users/plotly","html_url":"https://github.com/plotly","followers_url":"https://api.github.com/users/plotly/followers","following_url":"https://api.github.com/users/plotly/following{/other_user}","gists_url":"https://api.github.com/users/plotly/gists{/gist_id}","starred_url":"https://api.github.com/users/plotly/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/plotly/subscriptions","organizations_url":"https://api.github.com/users/plotly/orgs","repos_url":"https://api.github.com/users/plotly/repos","events_url":"https://api.github.com/users/plotly/events{/privacy}","received_events_url":"https://api.github.com/users/plotly/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/plotly/dash-docs","description":":book: The Official Dash Userguide","fork":false,"url":"https://api.github.com/repos/plotly/dash-docs","forks_url":"https://api.github.com/repos/plotly/dash-docs/forks","keys_url":"https://api.github.com/repos/plotly/dash-docs/keys{/key_id}","collaborators_url":"https://api.github.com/repos/plotly/dash-docs/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/plotly/dash-docs/teams","hooks_url":"https://api.github.com/repos/plotly/dash-docs/hooks","issue_events_url":"https://api.github.com/repos/plotly/dash-docs/issues/events{/number}","events_url":"https://api.github.com/repos/plotly/dash-docs/events","assignees_url":"https://api.github.com/repos/plotly/dash-docs/assignees{/user}","branches_url":"https://api.github.com/repos/plotly/dash-docs/branches{/branch}","tags_url":"https://api.github.com/repos/plotly/dash-docs/tags","blobs_url":"https://api.github.com/repos/plotly/dash-docs/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/plotly/dash-docs/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/plotly/dash-docs/git/refs{/sha}","trees_url":"https://api.github.com/repos/plotly/dash-docs/git/trees{/sha}","statuses_url":"https://api.github.com/repos/plotly/dash-docs/statuses/{sha}","languages_url":"https://api.github.com/repos/plotly/dash-docs/languages","stargazers_url":"https://api.github.com/repos/plotly/dash-docs/stargazers","contributors_url":"https://api.github.com/repos/plotly/dash-docs/contributors","subscribers_url":"https://api.github.com/repos/plotly/dash-docs/subscribers","subscription_url":"https://api.github.com/repos/plotly/dash-docs/subscription","commits_url":"https://api.github.com/repos/plotly/dash-docs/commits{/sha}","git_commits_url":"https://api.github.com/repos/plotly/dash-docs/git/commits{/sha}","comments_url":"https://api.github.com/repos/plotly/dash-docs/comments{/number}","issue_comment_url":"https://api.github.com/repos/plotly/dash-docs/issues/comments{/number}","contents_url":"https://api.github.com/repos/plotly/dash-docs/contents/{+path}","compare_url":"https://api.github.com/repos/plotly/dash-docs/compare/{base}...{head}","merges_url":"https://api.github.com/repos/plotly/dash-docs/merges","archive_url":"https://api.github.com/repos/plotly/dash-docs/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/plotly/dash-docs/downloads","issues_url":"https://api.github.com/repos/plotly/dash-docs/issues{/number}","pulls_url":"https://api.github.com/repos/plotly/dash-docs/pulls{/number}","milestones_url":"https://api.github.com/repos/plotly/dash-docs/milestones{/number}","notifications_url":"https://api.github.com/repos/plotly/dash-docs/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/plotly/dash-docs/labels{/name}","releases_url":"https://api.github.com/repos/plotly/dash-docs/releases{/id}","deployments_url":"https://api.github.com/repos/plotly/dash-docs/deployments","created_at":"2017-03-06T16:30:08Z","updated_at":"2017-08-19T05:10:38Z","pushed_at":"2017-08-22T01:34:34Z","git_url":"git://github.com/plotly/dash-docs.git","ssh_url":"git@github.com:plotly/dash-docs.git","clone_url":"https://github.com/plotly/dash-docs.git","svn_url":"https://github.com/plotly/dash-docs","homepage":"https://plot.ly/dash","size":18483,"stargazers_count":34,"watchers_count":34,"language":"Python","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":12,"mirror_url":null,"open_issues_count":1,"forks":12,"open_issues":1,"watchers":34,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/plotly/dash-docs/pulls/23"},"html":{"href":"https://github.com/plotly/dash-docs/pull/23"},"issue":{"href":"https://api.github.com/repos/plotly/dash-docs/issues/23"},"comments":{"href":"https://api.github.com/repos/plotly/dash-docs/issues/23/comments"},"review_comments":{"href":"https://api.github.com/repos/plotly/dash-docs/pulls/23/comments"},"review_comment":{"href":"https://api.github.com/repos/plotly/dash-docs/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/plotly/dash-docs/pulls/23/commits"},"statuses":{"href":"https://api.github.com/repos/plotly/dash-docs/statuses/5c5a3497fd8f29cd4c721a57f947ce9dbd53a76c"}}}}
{"actor":{"display_login":"chriddyp"}}